Jump to content
Search Community

Run part of the timeline only once

mk1 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

Hey, I have a quick question, I have build a website with hijacked scroll (I know it's bad but it was requested...) and I can't find a solution how to play parts of the timeline only once (in one way).

 

Here's my timeline:

timeline_s1.add("start")
    .add(TweenMax.to($boxes_s1, 1, {y: '+=40', autoAlpha: 1, ease: Power4.easeInOut}))
    .add(TweenMax.to($section_one, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}))

    //.add("S1start")
    .addPause()

    .to($section_one, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut, className: "+=bonzo"}, "S1")
    .add("S1start")
    .to("#S0", 0, {className: "-=isactive"}, "Change class")
    .to("#S1", 0, {className: "+=isactive"}, "Change class")
    .to($section_two, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}, "S1")
    .add("S1end")
    .addPause()

    //.add("S2start")

    .to(leftGif, .4, {x: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
    .to(rightGif, .4, {x: '+=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
    .to($section_two, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
    .add("S2start")

    .to("#S1", 0, {className: "-=isactive"}, "Change class2")
    .to("#S2", 0, {className: "+=isactive"}, "Change class2")
    .staggerFrom('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S22")
    .to($section_three, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}, "S22")
    .to(imessagewrapper, .4, {autoAlpha: 1, ease: Back.easeOut.config(1.7)}, "S22")
    .add("S2end")
    .addPause()

    .to('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S3")
    .to(imessagewrapper, .4, {autoAlpha: 0, ease: Back.easeOut.config(1.7)}, "S3")
    .to($section_three, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S3")
    .add("S3start")
    .to("#S2", 0, {className: "-=isactive"}, "Change class3")
    .to("#S3", 0, {className: "+=isactive"}, "Change class3")
    .to($section_four, .4, { autoAlpha: 1, ease: Power4.easeInOut}, "S33")
    .staggerFrom("#specialEvent", 0.4, {autoAlpha: 0, x: "-=50", ease: Back.easeOut.config(1.7)}, 0.1, "Special event")
    .staggerFrom("#specialEventDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Special event")
    .staggerFrom("#styleAdvice", 0.4, {autoAlpha: 0, x: "-=50", ease: Back.easeOut.config(1.7)}, 0.1, "Advice event")
    .staggerFrom("#styleAdviceDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Advice event")
    .staggerFrom("#convenience", 0.4, {autoAlpha: 0, x: "-=50", ease: Back.easeOut.config(1.7)}, 0.1, "Convenience event")
    .staggerFrom("#convenienceDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Convenience event")
    .staggerFrom("#quality", 0.4, {autoAlpha: 0, x: "-=50", ease: Back.easeOut.config(1.7)}, 0.1, "Quality event")
    .staggerFrom("#qualityDecr", 0.4, {autoAlpha: 0, y: "+=50", ease: Power4.easeInOut}, 0.1, "Quality event")
    .add("S3end")
    .addPause()

in ex. when users scrolls top, this parts is reversed too:

.add(TweenMax.to($boxes_s1, 1, {y: '+=40', autoAlpha: 1, ease: Power4.easeInOut}))
    .add(TweenMax.to($section_one, .4, {y: '-=40', autoAlpha: 1, ease: Power4.easeInOut}))

    //.add("S1start")

How can I avoid it?

 

P.S. This is my first gsap only website so I will much appreciate any suggestions about improving the JS code. Thanks in advance!

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Hi mk1  :)

 

Welcome to the GreenSock forums.

 

If you want to only play a section of a timeline, I think you're looking for the tweenFromTo() method.

 

https://greensock.com/docs/#/HTML5/Animation/TimelineMax/tweenFromTo/

 

Here's a pen I made for another forum question, but it demonstrates the technique of playing between labels.

 

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

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 2
Link to comment
Share on other sites

Thanks for reply @PointC.

I think I understand "the label" technique a bit and I should be more specific. The most important part of my question is how to make part of my timeline playable in only one direction. Like a normal TweenMax.to which runs separately.

 

So a better stated question would probably be: How to call an exterior Tween from within the timeline.

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