getLabelAfter + 1

[14four]

Hi, 

I have a scrolling site featuring 14 different animations with a "navigation dots" in between. I'd like to go to getLabelAfter + 1 when scrolling down (so it plays through the animation and then stops), but then getLabelBefore + 1 (or -1?) when scrolling up so it doesn't run through the "navigation dots", but stops just above the animation.

 

Is this possible? (Hopefully this makes sense.)

 

 

__________________________________________

 

[ go to this label when scrolling up from below ]

 

                           ANIMATION

__________________________________________

                                •

                                •

                                •

                                •

                                •

__________________________________________

 

[ go to this label when scrolling up from below ]

 

                           ANIMATION

 

[ go to this label when scrolling down from above ]

__________________________________________

                                •

                                •

                                •

                                •

                                •

__________________________________________

 

[ go to this label when scrolling up from below ]

 

                           ANIMATION

 

[ go to this label when scrolling down from above ]

__________________________________________

                                •

                                •

                                •

                                •

                                •

[Dipscom]

Hi 14four,

 

Welcome to the forums!

 

Without seeing any code it is hard to help you troubleshoot your code. Yes it is possible to tween to a particular label or time or both. Have you tried using the TimelineMax.tweenTo() method?

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/

[Carl]

I agree with Dipscom, a demo would greatly help.

 

Are you using ScrollMagic to trigger your animations? From what I understand it supports forward and reverse scrolling out of the box:

 

read this: http://scrollmagic.io/

 

Be sure to watch: 

 

 

The getLabelAfter() method takes in a time parameter so that you can get the next label after any time.

You can use getLabelTime() to assess what label you want to pass in to getLabelAfter() like so:

 

var tl = new TimelineMax();


tl.add("label1", 1)
  .add("label2", 2)
  .add("label3", 3)
  .add("label4", 4)
  .add("label5", 5)
  .add("label6", 6)
  .add("label7", 7);


console.log("what label comes after label4?")
console.log(tl.getLabelAfter(tl.getLabelTime("label4"))) //label5


console.log("what label comes after label6?")
console.log(tl.getLabelAfter(tl.getLabelTime("label6"))) //label7

http://codepen.io/GreenSock/pen/xVNPEp?editors=0010#

 

So once you know the start label and end label you want to tween from and to you can use tweenTo() as Dipscom suggested or tweenFromTo like

tl.tweenFromTo("label4", "label5");