Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ridiculous

Timelinelite designed for full page scroll sites?

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: https://codepen.io/bassta/pen/kDvmC

 

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!

Share this post


Link to post
Share on other sites

Very clever and concise solution, Diaco.

  • Like 1

Share this post


Link to post
Share on other sites

Hi ridiculous  :)

 

pls check this out ( the basic and simplest way with timeline )  : 

See the Pen XmozON by MAW (@MAW) on CodePen

 

When I scroll on the code pen it scrolls down to the second then immediately scrolls back to the top. am I missing something?

Share this post


Link to post
Share on other sites

Hi ridiculous  :)

 

pls check this out ( the basic and simplest way with timeline )  : 

See the Pen XmozON by MAW (@MAW) on CodePen

 

also for this. are you essentially creating one big time line where the scroll controls the playback?

Share this post


Link to post
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 !

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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 .

Share this post


Link to post
Share on other sites
On 11/13/2015 at 5:17 PM, Diaco said:

Hi ridiculous  :)

Can you please help me

I want to add remove class in active slide

 

Share this post


Link to post
Share on other sites
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:

 

 

Share this post


Link to post
Share on other sites
2 hours ago, Jaimin Darji said:

I want to add remove class in active slide

What have you tried? What issues did you run into? Did you check your browser's console (F12) and try to resolve any errors that appeared?

  • Like 1

Share this post


Link to post
Share on other sites

@ZachSaucier Check this codepen animation I have created where I'm facing an issue which is If we try to change timing of object(portfolio-inner-image) then it breaks. i.e. if you try to change time of class(portfolio-inner-image) from 0.2 to 0.7 in JS; it breaks.

 

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

Share this post


Link to post
Share on other sites
2 minutes ago, Jaimin Darji said:

if you try to change time of class(portfolio-inner-image) from 0.2 to 0.7 in JS; it breaks.

It seems to be working fine for me from what I can tell. What do you mean "it breaks"? 

  • Like 2

Share this post


Link to post
Share on other sites
15 hours ago, ZachSaucier said:

It seems to be working fine for me from what I can tell. What do you mean "it breaks"? 

Please check the scroll from 1st slide to 3rd slide top to bottom or bottom to top repeatedly, there you will a glitch

Share this post


Link to post
Share on other sites
9 hours ago, Jaimin Darji said:

Please check the scroll from 1st slide to 3rd slide top to bottom or bottom to top repeatedly, there you will a glitch

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

  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×