Rotator with navigation

[neworigin]

Hi there, I'm trying to leverage GSAP for a content rotator I'm putting together and am wondering how I might incorporate navigation my pagination. Currently, I have the timeline pausing when you mouseover a circle but would also like to be able to click them and have the playhead move to the corresponding slide and animate in. I'm thinking it might have to do with adding labels as I'm building the nested timeline for the rotator content but would be great if you could point me to any relevant examples. Thanks!

See the Pen ZEKOBQd by neworigin (@neworigin) on CodePen

[OSUblake]

53 minutes ago, neworigin said:

I'm thinking it might have to do with adding labels

 

That sounds like a good plan. Give it a shot!

[Cassie]

Here's a thread that may help - 

 

[neworigin]

Thanks for the responses! Not sure about using tweenTo. I don't want the intermediate steps to show but rather just jump to the corresponding label nd play. I tried adding the labels:

for (let i = 0; i < words.length; i++) {

 

        let wordTL = gsap.timeline();

 

        wordTL.from(words[i], { opacity:0 })

              .add("label" + i)

              .from(circles[i], {backgroundColor:'transparent'}, "<")

              .to(words[i], { opacity:1, onComplete: getTextHeights})

              .to(circles[i], {backgroundColor:'white'}, "<")

              .to(words[i], { opacity:0}, "+=" + words[i].getAttribute('data-display-time'))

              .to(circles[i], {backgroundColor:'transparent'}, "<")

 

        tl.add(wordTL)

    

    }

and then testing with a simple listener:

circle.addEventListener('click', function (event) {
            console.log(event);
            master.seek("label3", true);
        })

but it is just jumping to beginning of timeline. 

[Carl]

Perhaps the video and demo here will help

https://www.snorkl.tv/dynamic-navigation/

 

The trick is to use addPause() after each section animates in so you can just play at a label and the timeline will stop on its own. 
 

tl.play(“someLabel”) 

 

 

[Carl]

See the Pen vYOOgBQ by snorkltv (@snorkltv) on CodePen

[neworigin]

Hi Carl, thanks for the example. Very helpful but I would like the slides to continue to play after a few moments so you can see  I'm passing in data attributes to control timing.

I think my issue was the nested timeline so I used the getNestedLabelTime helper function to get the nested label names and convert them to actual times.

 

See the Pen MWmeMOj by neworigin (@neworigin) on CodePen

 

Perhaps there's a better way? 

One thing I'm still unsure of is why the pager circles re-render when I click the first circle only. Seems like it should be responding like all the others. 

[Carl]

the reason the pager circles re-animate when you click the first circle is because you put the pager() animation inside the master timeline

 

when you click on the first pager button,  you seek to the time that pager animation was inserted.

 

add the following log to test this

 

for (var i = 0, len = pager.children.length; i < len; i++) {
  (function (index) {
    pager.children[i].onclick = function () {
      let labelName = "page" + index;
      let tlTime = getNestedLabelTime(master, labelName);
      console.log(tlTime);// this is 1 for the first button. pager() is added at 1.25 seconds.
      master.seek(tlTime);
    };
  })(i);
}

 

The solution: don't put the pager animation in the same timeline as the other stuff.

 

 

[neworigin]

Thanks for sticking with me on this! I feel its close...  

The main issue is that I need to call the pager animation after the text blocks have rendered in order to keep them consistent.

I tried looking into onComplete but since the pager timeline is an infinite loop it never completes.

Your above example doesn't autoplay. I'm thinking I could incorporate a setInterval but guess I'm wondering if there is an easier approach before I pursue that ? 

 

[neworigin]

Got it... added new timeline for pager to the function after height is set.

See the Pen OJmRVrw by neworigin (@neworigin) on CodePen

 

Loving this stuff, thanks again!

[Carl]

Great!
 

in this thread is an early preview of autoplay that I’m working on

 

 

There are many ways to approach these things depending on the requirements. Glad you got yours working.