Simple titles pin scrolltrigger animation
Hello!
I'm new to GSAP and kind of a stranger to code. I'm struggling a little bit trying to achieve a basic animation, so I'm hoping someone in this forum could help me!
I'm looking to achieve a very simple effect: I have two titles pinned and I want the first one to fade out in the same exact moment that the second title appears. In order to do so I have generated an invisible container that works as a trigger. When it enters the viewport, the animation occurs. So far I've managed to get
Sure, you can change the timings by adjusting the positioning of the tweens or their durations like this...
// default tween duration is 0.5 seconds
tl.to(".header1", {
opacity: 1,
y: -30,
},0)
.to(".header1", {
opacity: 0,
y: -60,
},3)
.to(".header2", {
opacity: 1,
y: -30,
delay: 1,
},3)
.to(".header2", {
opacity: 0,
y: -60,
},6)
.to(".header3", {
opacity: 1,
y: -30,
delay: 1,
},6)
The timeline is tied to the scroll distance - so think of duration as a ratio.
