Jump to content
Search Community

Gsap - Scrolltrigger - Reveal animation with Transform and opacity

Banddev test
Moderator Tag

Recommended Posts

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.

1486799471_Screenshot2022-11-10at11_04_09.png.b85598cdef12ec755e636b8e5c3bb276.png

 

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

Link to comment
Share on other sites

 

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

  • Like 2
Link to comment
Share on other sites

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? 
 

Link to comment
Share on other sites

 

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!

 

  • Like 2
Link to comment
Share on other sites

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. 👍

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...