Gsap - Scrolltrigger - Reveal animation with Transform and opacity

[Banddev 2 Likes (Newbie)]

Hi,

I am stuck with a "stupid" thing.

I started to use Scrolltrigger recently, so I am still learning.

I just would like to do a reveal effect while you scroll, revealing each section with opacity and a little negative transform.

without the transform, everything is working as expected (start and end match), with the transform the starting point of each section is wrong.

 

Could somebody point me in the right direction?

I created a codepen so it is easy to understand 

 

See the Pen jOKBWyw by mp1985 (@mp1985) on CodePen

[akapowl 5,222 Likes (Superhero)]

 

Hey there.

 

The reason for that is that ScrollTrigger takes the transforms you initially set into account - and that's why you should never tween on your trigger element in a way that it changes their scroll-relevant positioning (like here on the y-axis), because it will likely make ScollTrigger not 'behave' like you actually intended.

 

The solution is to wrap whatever element you want to tween on in such a manner in another element and use that element as the trigger instead.

 

Does this work more like you had in mind?

 

See the Pen poKebqN by akapowl (@akapowl) on CodePen

[Banddev 2 Likes (Newbie)]

Thanks @akapowl , (sorry for my late reply),  yes it is kind of what I was looking for, the problem is that it is a big website so wrapping every element in another element won't be ideal because I will need to do this xx times, of course I could do this directly in JS but I was looking for a more straight forward solution.

is it not possible to set a sort of offset? (i think scrollmagic has this option)

 

I was able to do this with the "end point" basically I add the same amount of pixel (in this case 30) that I set for the animation at the begging (so now the "end point" matches the end of the element even with the animation). 

See the Pen QWxqdKQ by mp1985 (@mp1985) on CodePen

 

but I don't understand if I can do the same thing with the starting point, is it possible? 
 

[akapowl 5,222 Likes (Superhero)]

 

Sure, you can also try and calculate an offset for the start instead if you'd like - but be aware that this still might cause problems later on in one way or another if you decide to trigger anything else on that element at a later point or in another way.

 

What you could try is get the y-value of the element via gsap.getProperty() and base your calulations on that.

 

See the Pen JjZrvay by akapowl (@akapowl) on CodePen

 

 

 

Obviously any of the approaches will not work for the nested sections you have, because for those, ScrollTrigger also would need to have an eye on any ancestors of any trigger element - and since ScrollTrigger is built in a way that at minimum cost it gives maximum value, I don't think that is anything you can expect to be integrated into ST, but you would have to handle the logic for something like that yourself.

 

Hope this will help. Happy tweening!

 

[GreenSock 18,587 Likes (Superhero)]

On 11/16/2022 at 12:50 PM, Banddev said:

is it not possible to set a sort of offset? (i think scrollmagic has this option)

I don't think there's anything ScrollMagic can do that ScrollTrigger can't. And there's a ton of things that ScrollTrigger can do that ScrollMagic can't. If your goal is to offset the start value by a certain amount, that should be very easy. Like if it'd normally trigger at "top center" but you want to offset that by 500px, you can do "500px center". Negative values work fine too. Tons of options. If there's a ScrollMagic feature that you think is absent, please provide a minimal demo showing that feature at work in a CodePen or something and my guess is it'll be easily reproducible in ScrollTrigger. 👍