Jump to content
Search Community

Timelinelite designed for full page scroll sites?

ridiculous test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello!

 

I'm new to greensock and love it so far! 

 

Currently tackling a full page scroller site with it.

 

The code is based off of this right now: 

 

However instead of a simple scroll to, I'd like to add some animations to the scroll to.

 

For example when the user scrolls.

 

  1. First slide does animation 1
  2. That slide then does animation 2
  3. Then the next slide comes up.
  4. Also when scrolling up, it would be the reverse animations (slide goes down, animation 2, then animation 1)

I'm trying to figure out if timelinelite is designed for this.

 

I have a timeline set up that plays when the 'goToNextSlide' is triggered. However it doesn't work after the first slide. Do I need to do a conditional to check if the timeline is complete then trigger restart()?

 

Thanks!

See the Pen kDvmC by bassta (@bassta) on CodePen

Link to comment
Share on other sites

hmm , for me works correctly !...

 

and yes , it generates timeline tweens in a loop for every slide and when you play or reverse will stop at the Pause points and the timeline isn't really huge !

 

I see. Now if I were to integrate a navigation menu to this. Would I use a goto timeline position sort function?

 

Say I'm on slide 3 and press a navigation button to go to slide 1. Would I need to set the position of the playback?

Link to comment
Share on other sites

hmm , for me works correctly !...

 

and yes , it generates timeline tweens in a loop for every slide and when you play or reverse will stop at the Pause points and the timeline isn't really huge !

 

Also I'm not sure if it makes a difference but I'm scroll with a macbook track pad. but it seems to scroll down then back up for the first slide. but if I scroll for a long movement, it'll go to the second slide.

Link to comment
Share on other sites

Unfortunately we have to focus on supporting GSAP api  .

 

pls read the Doc. specially TimelineMax , you will find all methods and solutions you need to know 

 

for navigation menu you can add Labels to pause points in the loop , something like this : 

.addPause("Label"+i)

and use .tweenTo() or .seek() method to go .

 

and about  macbook track pad , i guess listener keeps firing for a while , you can check that with adding  console.log('fire')  in mouseW function .

Link to comment
Share on other sites

  • 3 years later...
2 hours ago, Jaimin Darji said:

Can you please help me

I want to add remove class in active slide

Hey Jaimin, welcome to the forums. 

 

I recommend creating a new thread to continue discussion. Please include a minimal demo of the issue that you're facing with a clear explanation of what's going wrong and what you want to happen. The below thread can help you with that:

 

 

Link to comment
Share on other sites

  • 2 weeks later...
1 hour ago, ZachSaucier said:

Sorry, I am not understanding what you're saying. You'll have to be more explicit.

Okay Let me be more specific.

 

Check my codepen now I have updated time from .2 to .7 in animations[0], animations[1], animations[2] all the three slides. You can find that time in updated code is .from('.section1 .portfolio-inner-image',.7,{yPercent:100})

Now you can see the scroll animation issue from 2nd slide. 1st slide animation is working fine which have blue background but the 2nd slide animation(orange background) not working properly is showing visibility hidden, opacity 0 instead of visibility visible, opacity 1.

If I will change this .7 to .2 .from('.section1 .portfolio-inner-image',.7,{yPercent:100}) in all slide then it will work fine as you saw before.

Let me know If still you are not getting my point then I can send you video of the issue.

  • Thanks 1
Link to comment
Share on other sites

I see. Thanks for explaining more clearly! Long story short you have conflicting tweens - some tweens are overwriting others. That's why the duration matters. With an appropriately short duration, the tweens can start after each other. With a longer one they conflict so GSAP has to try and figure out what to do.

 

The ways to work around this are to either 1) change your times so there's not this conflict or 2) change GSAP's default overwrite to a different value that works for your setup. By testing, TweenLite.defaultOverwrite = "allOnStart"; seems to work with the longer duration. You can see other values at https://greensock.com/docs/v2/TweenLite/static.defaultOverwrite

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

11 hours ago, ZachSaucier said:

TweenLite.defaultOverwrite = "allOnStart";

This works as expected. I have updated codepen you can check But now first time when we scroll 1st slide to 3rd slide it's working fine but when we scroll reverse(scroll up from 3rd to 1st slide) 3rd to 2nd slide working fine but when we scroll 2nd slide to 1st slide there is opacity issue in class="section section2"  it should be opacity 0 in 2nd slide(that time current slide is 1st slide .section1) instead of .7/.8 you can check.

Also I need your help for button which is left side center align. I have added some code for active status & click to play particular slide but not working perfect.

 

Thanks

See the Pen bGGZNmE by jaimindarji07 (@jaimindarji07) on CodePen

Link to comment
Share on other sites

7 hours ago, Jaimin Darji said:

it should be opacity 0 in 2nd slide(that time current slide is 1st slide .section1) instead of .7/.8 you can check.

Sorry, I don't understand what this means. I'm guessing it is likely a problem with conflicting tweens. You might need to play around with things to get it working (or just change it so that there isn't any conflict which is the easier method). 

 

7 hours ago, Jaimin Darji said:

I need your help for button which is left side center align.

This is a forum focused on GSAP and I don't have time to help you with every thing that goes wrong in your project - sorry, I wish I had more time!

  • Like 1
Link to comment
Share on other sites

On 11/22/2019 at 7:39 PM, ZachSaucier said:

Sorry, I don't understand what this means. I'm guessing it is likely a problem with conflicting tweens. You might need to play around with things to get it working (or just change it so that there isn't any conflict which is the easier method). 

 

This is a forum focused on GSAP and I don't have time to help you with every thing that goes wrong in your project - sorry, I wish I had more time!

Thank you for your time

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