Jump to content
d0minium

stop/reset timelinemax intro

Recommended Posts

I am missing something that I know should be easy for someone well experienced. I have only a couple of months of web design experience.


I have a intro timeline and another one trigger on scroll. Both attach to a scrollmagic controller.


The intro should finish before the user scroll down. I tried to overflow: hidden on y axis etc... doesn't work. But hidden the scrollbar is not good User experience.


IF the intro played completely the first scene is good and reverse fine.


But when the user scroll down to the first scene (of 6 scene total) and the intro is not done everything break down when the reverse of intro is triggered. And if windows is refresh on scene1. The intro start.


IS there a way to somehow reset the intro timeline if the user reverse back on intro when they scroll down to scene1. And to lock the intro animation when refresh on scene1 or scene2 ...3....Maybe it's a scrollmagic coding but maybe greensock has a specific code to resolve this


 


See the Pen zKyZZd by dominium (@dominium) on CodePen


 


Thanks in advance


Share this post


Link to post
Share on other sites

Hello d0minium, and Welcome to the GreenSock Forum!

 

You have a lot of code to comb through in your example. But this looks more a question on how to use ScrollMagic and not GSAP. ScrollMagic is made with GSAP but it is not made by GreenSock. ScrollMagic is a scrolling management tool, to manage scrolling in the browser.

 

I suggest you check out the ScrollMagic documentation page

 

http://scrollmagic.io/docs/

 

and you can always post a question on the ScrollMagic git submit issue page.

 

https://github.com/janpaepke/ScrollMagic/issues

 

Also checkout ScrollMagic tutorials

 

https://ihatetomatoes.net/?s=scrollmagic&post_type=post

 

Usually if you want to stop and reset a timeline

// this would invalidate and restart the timeline
timeline.invalidate().restart();

// or invalidate, set playhead to 0 and pause the timeline
timeline.invalidate().progress(0).pause();

Resources:

invalidate(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/

progress(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

pause(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/

restart(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/restart/

 

:)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the prompt respond.

 

Yes I know about Peter and already export all your codepen exemple and I also have a lot of other exemple but none can help me with this.

 

I am a new designer and I think I can do this with some GSAP code. The ressources you gave me is advanced coding for me, a newbie. Anyway I will finish the other scene of the website and figure something out. My head is spinning learning all this java query var grid css etc...  

 

Thank you again and I will review all your codepen exemple.

Share this post


Link to post
Share on other sites

I don't want to repost the same. I did a new simple codepen.

 

Why is the intro tween doesn't finish while scrollling to scene 1.

 

I just can't figure it out

 

See the Pen qazayM by dominium (@dominium) on CodePen

 

There must be a way to have the intro tween to finish to play once and to keep the end state of to().

 

Really a scrollmagic issue. No longer people helping on the forum.

 

Thanks for this 

Share this post


Link to post
Share on other sites

Hi d0minium :)

 

Welcome to the GreenSock forums. 

 

Your intro animation doesn't finish because your intro and scene1 timelines are both targeting the .eye class. The intro animation starts playing immediately, but as soon as you scroll to the scene1 trigger, you start the scene1 timeline which then takes control of the .eye element and starts animating it.

 

You're basically starting a fight for control with two timelines trying to animate the same element. 

 

Hopefully that makes sense.

 

Happy tweening.

:)

Share this post


Link to post
Share on other sites

Woow yes this makes a lot of sense. 

 

Thanks a lot for this simple brain spark for me. But is there a solution to reset the intro timeline to the end state of the animation when scrolling to the scene1.

 

MAybe having the overflow-y: hidden of the body hidden and oncomplete of the intro have the body overflow visible. Already tried this one but it doesn't work. MAybe with some jquery or something. I am a 8 month old web designer so I am learning step by step.

 

This should be a obvious solution for somebody experienced with gsap-scrollmagic which is in all the tools outhere the best tools to regain a passion for creation for me at least.

 

Thanks PointC for that easy pointer

Share this post


Link to post
Share on other sites

Yes - you could force the first animation to finish before allowing the user to scroll. Simply set the body overflow to hidden in your CSS and then use an onComplete callback to set the overflow back to visible when the intro timeline has finished. You could do it like this:

var intro = new TimelineMax({onComplete: function() {
  TweenMax.set("body", {overflow:"visible"})
}
});

Here's a fork of your pen with that solution applied to it:

See the Pen wzLmKm by PointC (@PointC) on CodePen

 

I slowed down your scene1 timeline so you can more easily see what's happening.

 

Happy tweening.

:)

  • Like 2

Share this post


Link to post
Share on other sites

It's that easy!!!

 

I have been trying all differents things, downloading a bunch of codepen example. asically going crazy for that.

 

hahha! Shame on me!

 

I guess that's what a newbie is feeling thanks so much.

 

The scene 1 has a bunch of other pictures.

 

Yes I am a happy tweener!

  • Like 1

Share this post


Link to post
Share on other sites

it's all good but if I refresh the page on the scene1. The intro element go crazy. when scrolling back on intro

 

I know there's a bunch of code refresh reset kill restart. But how can I implement this in this exemple?

 

Maybe a scrollmagic kill scene function or gsap function?

 

Thanks

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.