Jump to content
Search Community

Scrolltrigger | horizontal scroll

Adithya test
Moderator Tag

Recommended Posts

Hey ! I'm newbie to gsap and the journey here as been great so far !  I've been stuck with this animation for quite few days and thought i could seek help ,

 

Pain-point : The heading must animate one after the other while I scroll , but everything comes into the viewport at the same instance. 

 

desired-output https://drive.google.com/file/d/1gFJEtuEkhNUfchI3Pgb14h6EOLXyrcjW/view?usp=drivesdk

 

Hereby I attach a video of how it should look while i scroll.

 

Note: The octopus-image and the paragraph down the heading will be animated the same way , I've just made it with the Heading in codesandbox for testing prupose. 

 

Thanks

See the Pen eYBGXyW by adithyacodes (@adithyacodes) on CodePen

Link to comment
Share on other sites

19 minutes ago, Adithya said:

Pain-point : The heading must animate one after the other while I scroll , but everything comes into the viewport at the same instance. 

 

 

I would guess you are using standalone gsap.to() or gsap.from tweens that are not part of a timeline.
This means that all the tweens happen simultaneously, you can use a delay option {delay: 1} in your vars to space them apart, but it is much better with a timeline.

 

Here are the relevant links from the docs.

 

https://greensock.com/docs/v3/GSAP/Timeline

 

 

Try with

var timeline = gsap.timeline()
.to('.target1', {...your code here})
.to('.target2', {...your code here})

 

8 minutes ago, Adithya said:

hey ! Do codesandox links work on you forum ?

 

I think they are not embedded like codepen links, but it is easy to follow and check them.

  • Like 1
Link to comment
Share on other sites

15 minutes ago, tailbreezy said:

 

I would guess you are using standalone gsap.to() or gsap.from tweens that are not part of a timeline.
This means that all the tweens happen simultaneously, you can use a delay option {delay: 1} in your vars to space them apart, but it is much better with a timeline.

 

Here are the relevant links from the docs.

 

https://greensock.com/docs/v3/GSAP/Timeline

 

 

Try with


var timeline = gsap.timeline()
.to('.target1', {...your code here})
.to('.target2', {...your code here})

 

 

I think they are not embedded like codepen links, but it is easy to follow and check them.

Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough :)

Link to comment
Share on other sites

1 hour ago, Adithya said:

Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough :)

 

1 hour ago, Adithya said:

Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough :)

 

Hey ! I've tried implemnting the approach but it isn't something that is desired, 

 

pain-points :

 

1. The heading animation should be corresponding to the scroll , as i scroll the first heading comes and vanishes and in the same place the next heading comes ( kind of carousel but it happens as i move the page-scrollbar (nobuttons)

Link to comment
Share on other sites

There are many, many ways you could build this. Unfortunately we can't do it all for you but we'd be happy to answer any GSAP-specific questions and I'm also willing to describe a general approach and you can run with it: 

 

You could initially set all the opacities to 0 and have each section sitting on top of each other (position: fixed should be fine, or absolute with top: 0). Then, you could set up individual ScrollTriggers either with specific number values of scroll positions or you could put "dummy" (invisible) <div> elements stacked vertically so that you could just use them as trigger points. 

 

Then, use onToggle callbacks to call a function that manages fading the appropriate elements in and/or out. 

 

Another option is to set up one long timeline that has each element fade in/out at various places along the timeline, and then just link that timeline to the scroll position by setting a scrollTrigger value on that entire timeline, and set scrub: true (or use a number if you want it to be "smooth"). 

 

I would recommend doing just the simplest version using that CodePen you started with, and if you run into trouble post it here with your GSAP-specific question and we'd be happy to jump in and help. 

 

Good luck!

  • Like 2
Link to comment
Share on other sites

17 hours ago, GreenSock said:

There are many, many ways you could build this. Unfortunately we can't do it all for you but we'd be happy to answer any GSAP-specific questions and I'm also willing to describe a general approach and you can run with it: 

 

You could initially set all the opacities to 0 and have each section sitting on top of each other (position: fixed should be fine, or absolute with top: 0). Then, you could set up individual ScrollTriggers either with specific number values of scroll positions or you could put "dummy" (invisible) <div> elements stacked vertically so that you could just use them as trigger points. 

 

Then, use onToggle callbacks to call a function that manages fading the appropriate elements in and/or out. 

 

Another option is to set up one long timeline that has each element fade in/out at various places along the timeline, and then just link that timeline to the scroll position by setting a scrollTrigger value on that entire timeline, and set scrub: true (or use a number if you want it to be "smooth"). 

 

I would recommend doing just the simplest version using that CodePen you started with, and if you run into trouble post it here with your GSAP-specific question and we'd be happy to jump in and help. 

 

Good luck!

 Hey ! I've included a codepen here , which is quite similar to my use case , here i want each box ( yellow, red , green ) to fade out one after the other as i scroll . bit confused since they fadein and out at the same view port . glad, if you could help

Link to comment
Share on other sites

It seems as if you edited the code in your CodePen. Please use the "fork" button when creating new versions of your demos that you've saved to these forums so that context is not lost.

 

There are several issues: 

  • All of your boxes are stacked on top of each other in the same exact position. So even if you fixed the other issues the animation would fire at the same time because of this. You should position them in different places if that's the effect that you're going for.
  • Your page doesn't have much to scroll. You should probably force some scrolling so that you can see ScrollTrigger working better.
  • You didn't attach a ScrollTrigger to your timeline. That's necessary if you want the animation to fire based on the scroll position.
  • Your ease is invalid. It should be something like "power2". 

highly recommend watching the ScrollTrigger video found in the docs. Also reading the most common ScrollTrigger mistakes. And I strongly suggest formatting your code more because it will save you time in the long run and make it much easier for other people to understand and update your code :) 

See the Pen ExNwzgx?editors=0100 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

 

I'll answer with regard to the other thread you created that apparently switched over to this thread, since you changed the codepen in here.

Some of this will be repetition of what @ZachSaucier already said, he was faster yet again.

 

How best to do it depends on how exactly you want things to happen.

 

Here is one way:

 

0) Using proper formatting will help yourself and others better understand what is going on in your code. Also make sure you don't have any typos or missing brackets/tags in your code.

 

1) Create enough scrollable space. Since your items are positioned fixed and you won't have native scrolling, you could leverage a ScrollTrigger that pins your parent and thus creates pinSpacing and thus scrollable space.

 

2) Loop through your items and for each create the animation and a ScrollTrigger, with the start of each creating an offset by multiplying whatever values you want them spread out by with the items index. Something like 

 

start: 'top top-=' + whateverValue * ind,

 

3) Make sure the total duration of the individual triggers and the duration of the pinning ScrollTrigger work well together, or get the correct height for your pinning ScrollTrigger with regard to the other individual ScrollTriggers from the start.

 

4) Since when you loop over the items, the first one to appear in the DOM will be animated first and the last one to appear in the DOM will be animated last, you will have to make sure to give your items a proper z-index, since they will appear stacked in the 'wrong order'.

 

5) Enjoy scrolling.

 

 

The codepen demo below should be easily adjustable for your needs.

 

Feel free to fork and play around with the values  (spaceBetween, triggerDuration, changing between scrub and toggleActions).

And as @ZachSaucier mentioned, stroll through the docs and videos in combination with this to get a better understanding of how ScrollTrigger works.

 

See the Pen 00806d3c2fe0f4275ec9846196b85919 by akapowl (@akapowl) on CodePen

 

Hope this helps.

Cheers.
 

  • Like 3
Link to comment
Share on other sites

@akapowl , Hey ! That's some serious breakthrough ,  this was a simple sample case created to explain my issue , but i was trying to do this in the animation which wasn't happening , Is there an approach where i can hide the other boxes from the dom and make them appear only when they are animating as i scroll ( say : when the red box animates the other boxed stacked without animation shoudn't be visible in the dom ) .

I genuinely thank you for the pen , it helped me work on the issue better. 

 

Thanks a ton !

Link to comment
Share on other sites

3 hours ago, Adithya said:

Is there an approach where i can hide the other boxes from the dom and make them appear only when they are animating as i scroll

 

There is no single one-solution-fits-all-needs approach - again, it depends on how exactly you want things to happen.

 

If you want something similar to the video you posted, you would probably first have to set all but the first box (the red one) to invisible.

Based on my approach what you'd want to do instead of using a single tween, is use a timeline and add a second tween for the nextElement to fade in after the first has animated out. Of course you'd have to check for the next element to animate beforehand.

 

If you do it like that though, you will likely run into conflicting tweens on the autoAlpha/opacity, so you could think about wrapping your boxes, set those wraps to invisible initially and in the second tween of your timeline tween on the wraps' autoAlpha to make the next box appear.

 

 

I'd suggest you give it a try based on my demo and we'll see how we can help you from there.

 

 

  • Like 2
Link to comment
Share on other sites

7 hours ago, akapowl said:

 

There is no single one-solution-fits-all-needs approach - again, it depends on how exactly you want things to happen.

 

If you want something similar to the video you posted, you would probably first have to set all but the first box (the red one) to invisible.

Based on my approach what you'd want to do instead of using a single tween, is use a timeline and add a second tween for the nextElement to fade in after the first has animated out. Of course you'd have to check for the next element to animate beforehand.

 

If you do it like that though, you will likely run into conflicting tweens on the autoAlpha/opacity, so you could think about wrapping your boxes, set those wraps to invisible initially and in the second tween of your timeline tween on the wraps' autoAlpha to make the next box appear.

 

 

I'd suggest you give it a try based on my demo and we'll see how we can help you from there.

 

 

Hey ! I've been working with animation part , i have implemented the same piece of code same as the boxes codepen , but the animation is not in sync with the scroll , it just happens as a slidehow even without scroll. Just if its possible to tell what is making the animation in sync with scroll here , i have tried refering the docs and playing around the code and implementing it but the animation timeline doesn't sync with scroll. thanks

 

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Based on that description it sounds like you're not using the scrub property of ScrollTrigger. But it's impossible to say for sure without a minimal demo.

Hey ! i was able to fix the scroll issue :) , the only issue which still persists is , i want the text to appear while it comes in and go off while the next comes ,instead my test gets stacked, is there a better approch here 

Link to comment
Share on other sites

Just now, Adithya said:

Hey ! i was able to fix the scroll issue :) , the only issue which still persists is , i want the text to appear while it comes in and go off while the next comes ,instead my test gets stacked, is there a better approch here 

This the code snippet which is crashing and the text stack one next to other

Screenshot (68).png

Link to comment
Share on other sites

You're making one of the most common ScrollTrigger mistakes - including ScrollTriggers on tweens within timelines. Doing so doesn't make much sense. What you should do instead is create you animations as part of a timeline and apply the ScrollTrigger to the timeline itself. 

 

You're also making one of the most common GSAP mistakes of using the old version of the eases. 

Link to comment
Share on other sites

 

In addition to what Zach said:

 

When you incorporate a ScrollTrigger as an object in a tween or a timeline it is supposed to be scrollTrigger:{...} in camelCase.

 

Also toggleActions and scrub won't work alongside each other - when you include both, the scrub will take control of the tween/timeline and the toggleActions becomes redundant.

 

  • Like 3
Link to comment
Share on other sites

16 hours ago, akapowl said:

 

In addition to what Zach said:

 

When you incorporate a ScrollTrigger as an object in a tween or a timeline it is supposed to be scrollTrigger:{...} in camelCase.

 

Also toggleActions and scrub won't work alongside each other - when you include both, the scrub will take control of the tween/timeline and the toggleActions becomes redundant.

 

hey ! @akapowl and @ZachSaucier Got you ! I've been able to achieve the animation , but even after a forEach loop , why do the text animation all animate at one go , i want the text1 to fade in and out followed by the next and so on , i can target each text individually but that would make my code long , what am i missing exactly ? 

 

codepen of the  flawed animation  

See the Pen NWbXqMz by adithyacodes (@adithyacodes) on CodePen

 

 

and the codepen here 

See the Pen 00806d3c2fe0f4275ec9846196b85919 by akapowl (@akapowl) on CodePen

 which was provided from you in the same thread above, I'm bit confused why do we use two scrolltrigger objects ( scrolltrigger and scrolltrigger.create) for the usecase

 

Thanks

Link to comment
Share on other sites

25 minutes ago, Adithya said:

but even after a forEach loop , why do the text animation all animate at one go , i want the text1 to fade in and out followed by the next and so on

 

Because as Zach and I both already pointed out, all of your items are positioned fixed - there is no spacing that sets them apart. If you simply just set the start of each scrollTrigger to something like 'top 20px' they will all start animating at the same time because that trigger-start-point will be reached at the same position for each element.

 

 

 

That's why you have to create some sort of offset - either like I tried to explain and do in my pen

 

On 2/22/2021 at 11:51 PM, akapowl said:

2) Loop through your items and for each create the animation and a ScrollTrigger, with the start of each creating an offset by multiplying whatever values you want them spread out by with the items index. Something like 

 

or as Zach suggested by positioning your items in a diferent way than fixed.

 

 

 

25 minutes ago, Adithya said:

I'm bit confused why do we use two scrolltrigger objects ( scrolltrigger and scrolltrigger.create) for the usecase

 

That is also the reason why there is a second ScrollTrigger instance in my pen - because otherwise you would have have no natural scrolling in the codepen demo with the boxes you posted.

 

On 2/22/2021 at 11:51 PM, akapowl said:

1) Create enough scrollable space. Since your items are positioned fixed and you won't have native scrolling, you could leverage a ScrollTrigger that pins your parent and thus creates pinSpacing and thus scrollable space.

 

  • Like 1
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...