Develop Reference

Start multiple animations simultaneously in Framer Motion

I'm new to Framer Motion (and animations in general) and am trying to replicate the below GSAP effect
https://codepen.io/cameronknight/pen/pogQKwR
I can achieve the reveal effect and scale effect individually, but when applying both animations,
only one of the animation triggers, and the remainder of the second animation only triggers after the first has completed.
I've tried altering the delay, duration etc. but to no avail, and was wondering if there was any alternative method to trigger both animations at the same time (or with very minimal delay).
The code can be found below:
I have a motion image element, and a motion div element on top styled to be the exact same dimensions on top of the image element. An X transformation is applied to the motion div element to achieve the reveal effect. I then tried to apply a scale effect to the motion image element, and this is where the problem occurs.
function App() {
const overlayVariant = {
start: {
x: "0%",
opacity: 1,
},
end: {
x: "100%",
transition: {
delay: 0.5,
duration: 1,
ease: "easeInOut"
}
}
}
const imageVariant = {
start: {scale: 1.1},
end: {
scale: 1,
transition: {
delay: 0.5,
duration: 1,
ease: "easeOut"
}
}
}
return (
<main className="app-container">
<section className="app-contents">
<div className="app-image">
<motion.div
className="image-overlay"
variants={overlayVariant}
initial="start"
animate="end"
>
</motion.div>
<motion.img
src={image}
variants={imageVariant}
whileHover="hover"
transition={{duration: 0.6, ease: [0.43, 0.13, 0.23, 0.96]}}
initial="start"
animate="end"
/>
</div>
</section>
</main>
);
}
Thank you advance, and I would appreciate any help I could get.

Animating child elements in ScrollTrigger GSAP horizontal scroll

I have an svg which forms the basis of my horizontal scroller.
Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the svg.
Currently, only the .animate elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or translating up or down in any way?
TL;DR, here is what I'm trying to achieve:
When the scroller pins in place, and the user continued to scroll down, start fading away .horizontalScroller__intro.
Once .horizontalScroller__intro has faded away, start the horizontal scroll for .horizontalScroller__items
Any elements with the class of .animate in my scroller will fade in up to its original position.
Note: I understand SO rules and preferences to post code here. But, my demo's contain a length SVG, which I cannot post here as it exceeds SO's character limit.
Here is a demo of my latest approach
From the scrollTrigger docs, containerAnimation is what helps achieve animations on horizontal scrollers, and is what I've tried to achieve.
However, in my demo above, I have the following issues:
.horizontalScroller__intro doesn't show initially, when it should, and should fade out on scroll.
The horizontal scroller doesn't work anymore
The .animate elements that are in view, do not fade in up
If I use timeline (see below snippet), then the intro fade out and scroller works. But, doesn't animate in the child elements, which is where I need containerAnimation
$(function() {
let container = document.querySelector(".horizontalScroller__items");
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".horizontalScroller",
pin: ".horizontalScroller",
anticipatePin: 1,
scrub: true,
invalidateOnRefresh: true,
refreshPriority: 1,
end: '+=4000px',
markers: true,
}
});
tl.to('.horizontalScroller__intro', {
opacity: 0,
})
tl.to(container, {
x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
})
});
I'm struggling to find a way in which I can make the intro fade in, the scroller scroll horizontally, and the .animate elements to fade in, or fade in up.
Edit:
#onkar ruikar, see notes based on your sandbox below:
When you scroll down and the comes into view, I want the initial .animate elements to scroll up into view (currently, once the text fade away, and then the horizontal scroller starts working, only then does the .animate that are suppose to be in view, fade in up
After the initial .animate elements have loaded, the next .animate elements that are part of the scroller, they do not fade in up. They're static. As each .animate element comes into view, then it should fade in up (I think it's currently triggering once, for all the elements).
See visual here:
In the above gif, you can see the first two text blocks are hidden, as soon as they're in view, I want them to fade up. Then the 3rd and 4th text blocks are static, when they should fade up as the user scrolls to that section.

You need to use onUpdate method on the scroll trigger.
onUpdate: self => console.log("progress", self.progress)
Based on the self.progress set opacity, x position etc.
Full demo on codesandbox. Click on "Open Sandbox" button on bottom right to see the code.
if ("scrollRestoration" in history) {
history.scrollRestoration = "manual";
}
$(function() {
let container = document.querySelector(".horizontalScroller__items");
let elements = gsap.utils.toArray(
document.querySelectorAll(".animate")
);
let intro = document.querySelector(".horizontalScroller__intro");
let svg = document.querySelector("svg");
let animDone = false;
window.scrollPercent = -1;
var scrollTween = gsap.to(container, {
ease: "none",
scrollTrigger: {
trigger: ".horizontalScroller",
pin: ".horizontalScroller",
anticipatePin: 1,
scrub: true,
invalidateOnRefresh: true,
refreshPriority: 1,
end: "+=600%",
markers: true,
onEnter: (self) => {
moveAnimate();
},
onLeaveBack: (self) => {
resetAnimate();
},
onUpdate: (self) => {
let p = self.progress;
if (p <= 0.25) {
let op = 1 - p / 0.23;
intro.style.opacity = op;
animDone = false;
}
if (p > 0.23) {
moveAnimate();
// we do not want to shift the svg by 100% to left
// want to shift it only by 100% - browser width
let scrollPercent =
(1 - window.innerWidth / svg.scrollWidth) * 100;
let shift = ((p - 0.22) * scrollPercent) / 0.78;
gsap.to(svg, {
xPercent: -shift
});
}
}
}
});
function resetAnimate() {
gsap.set(".animate", {
y: 150,
opacity: 0
});
}
resetAnimate();
function moveAnimate() {
for (let e of elements) {
if (ScrollTrigger.isInViewport(e, 0.4, true))
gsap.to(e, {
y: 0,
opacity: 1,
duration: 2
});
}
}
});
You need to set opacity 0 on .animate elements in CSS. And use end: '+=400%' instead of 4000px. Relative dimensions can be used in position based calculations easily.

JS/GSAP solution for infinite animation

I am trying to create a infinite star rain animation, all stars are SVG's.
I tried this to create the animation:
(function($) {
TweenMax.set(".astar", {
x:function(i) {
return i * 50;
}
});
TweenMax.to(".astar", 5, {
ease: Linear.easeNone,
x: "+=500", //move each box 500px to right
modifiers: {
x: function(x) {
return x % 500; //force x value to be between 0 and 500 using modulus
}
},
repeat: -1
});
})(jQuery);
The repeat process is not smooth as you can see on this Codepen:
https://codepen.io/daniellwdb/pen/NXogoB
Is there any JS or GSAP solution to make the animation smooth so that it will look like stars keep spawning from the left and move to the right?

With your current setup, I think the easiest way to pull this off would be to duplicate your starfield so that the beginning of your next loop is identical to the end of your first one. Let's say this is your starfield SVG:
|...o.|
|o....|
|..o..|
Your new "duplicated" starfield would essentially be:
|...o.|...o.|
|o....|o....|
|..o..|..o..|
So when you move that duplicated image from left to right 100%, what you see in the last "frame" is identical to what it will return to when it loops.
Here's a fiddle that shows this concept in action: https://jsfiddle.net/yarp4oLs/5/
I have two identical starfield images that are 200x200 (so 400x200 when side-by-side) and they are displayed in a "viewport" container that is 200x200. Then I just slide them to the left 200px and repeat. Instant stars!

JavaScript rotation is wrong after translating

I'm using Velocity.js for animation.
I'm first translating and rotating an object. After the animation is complete I need to rotate the object by an additional 360 degrees.
The problem is that during the second animation the rotation axis is off. Instead of rotating around the center the object rotates around its original point.
$.Velocity( obj, "stop" );
$.Velocity( obj,
{translateX: pos, rotateZ: rotation + 'deg'},
{duration: 1000, complete: function() {
$.Velocity( obj, {rotateZ: "360deg"}, {duration: 1000} ); }
});
What may be the problem?
UPDATE
Codepen that demonstrates the issue: http://codepen.io/anon/pen/MYZaaj

This is because Velocity currently does not parse initial transform values. From the docs:
Note that Velocity's performance optimizations have the byproduct of ignoring outside changes to transform values (including initial values as defined in your stylesheets, but this is remedied via Forcefeeding). (You can manually set transform values within Velocity by using the Hook function.)
This will be addressed in future version but currently follow the advice below to use forcefeeding to fix it.

Sorry, I don't have enough points to comment, but hook (the other answer is right). Just add $.Velocity.hook(circle, "translateY", "0");
var circle = $(".circle");
circle.velocity({
translateX: 500,
rotateZ: 360
}, {
duration: 2500
}).delay(500).velocity({
rotateZ: -360 * 2,
translateY: 200
}, {
duration: 2500
});
$.Velocity.hook(circle, "translateY", "0");
circle.delay(500)
.velocity({
translateY: 0,
rotateZ: -360 * 5
}, {
duration: 2500
});
.circle {
background: url("https://dl.dropboxusercontent.com/u/16997159/square.png");
width: 128px;
height: 128px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<div class="circle">
</div>

Cross-dissolve transition for scrolled elements

I am creating a long single page website and using ScrollMagicJS v1.3.0 to trigger events and to make some elements sticky. I would like to create a variety of other transition effects as one scrolls down the page.
Here's a jsfiddle that replicates the horizontal scrolling of my site.
scrollControl = new ScrollMagic({
vertical: false,
});
var myScrollScene = new ScrollScene({
triggerHook: 0,
offset: 0,
triggerElement: '#shot-0-1',
duration: '100vw',
pushFollowers: true
})
.setPin('#shot-0-1')
.addTo(scrollControl);
For instance, I want to create fade-to-black, flare-to-white, and cross-dissolve transitions between pages.
I understand some of the basic principles of HTML5 transitions, how to make one image dissolve into another, but I haven't been able to figure out a clever way to do it using the ScrollMagic scrolling.
Things I've considered: The next page slides under the current page and then transitions from 1.0 to 0 opacity using ScrollMagic triggers?
But how to do it in a way non-hacky and consistent with ScrollMagic's framework?

This has been asked and answered in the ScrollMagic's issues section:
https://github.com/janpaepke/ScrollMagic/issues/269
here's a copy:
A common misconception is that you need to do everything with the ScrollMagic pin functionality.
If the content isn't moving within the scroll flow anyway (it stays in position and is faded out or moved to side or sth. like that) you can have it as "fixed" right from the beginning.
That saves a lot of work and confusion.
The only reason to use ScrollMagic's pinning functionality is when an element should sometimes scroll naturally with the DOM and sometimes it shouldn't.
So if you have elements that are in place and should just be replaced by others, have them fixed the whole time.
Like this: https://jsfiddle.net/janpaepke/6kyd6ss0/1/
If it is indeed a case were you should use ScrollMagic's pinning method, then do the animation inside of a wrapper, that you pin.
Like this: https://jsfiddle.net/janpaepke/6kyd6ss0/3/
　

Here's the solution I settled on.
scrollControl = new ScrollMagic({
vertical: false,
});
vw = $(window).width();
console.log("width:" + vw + "px");
// pin frame 2
var myScrollScene = new ScrollScene({
triggerHook: 0,
triggerElement: '#shot-2',
// This pin is considerably longer than average
offset: 0,
// duration = stickyLength + disolve_duration
duration: 1.5 * vw + 'px'
})
.setPin('#content-2', {
pushFollowers: false
})
.addTo(scrollControl)
.addIndicators({
zindex: 100,
suffix: 'pin2'
});
// move frame 3 up early and pin it
var myScrollScene = new ScrollScene({
triggerHook: 0,
triggerElement: '#shot-2',
offset: 0,
// duartion = 1.5, but why?
duration: 1.5 * vw + 'px'
// the faux pin doesn't actually expand the container the way SM does
// so the results are a little strange
})
.on("start end", function (e) {
$('#content-3').css({left: 0, position:'fixed'});
})
.on("enter leave", function (e) {
$('#content-3').css({left: 0, position:'relative'});
})
.addTo(scrollControl)
.addIndicators({
zindex: 100,
suffix: 'pin3faux'
});
var dissolve = TweenMax.to('#content-2', 1, {
autoAlpha: 0
});
// dissolve frame 2 to frame 3
var myScrollScene = new ScrollScene({
triggerHook: 0,
// Note that though we are fading frame 2, we are
// using the arrival of frame 3 the trigger
triggerElement: '#shot-2',
// The sets the rapidity of the dissolve
// offset = stickyLength
offset: 0.33 * vw + 'px',
// The sets the rapidity of the dissolve
duration: 1 * vw + 'px'
})
.setTween(dissolve)
.addTo(scrollControl)
.addIndicators({
zindex: 100,
suffix: 'dissolve'
});
I used a pushFollowers: false on a pin and z-index to slide the next frame (also pinned) behind the first. Then a Tween to dissolve into the second frame. The result is a nice cinematic dissolve feature with adjustable duration.
Hope it is useful to others.
https://jsfiddle.net/wmodes/b4gdxeLn/