knalle Posted April 22, 2021 Share Posted April 22, 2021 Can you add chapters "indicators" in the GSDevTools seekbar - like you do have in the Vimeo embeds (https://greensock.com/docs/v3/Plugins/Flip). I am using GSDevTools as a player for a timeline that has a few pauses ( tl.addPause() ) where indicators of the pauses would be nice. Link to comment Share on other sites More sharing options...
GreenSock Posted April 22, 2021 Share Posted April 22, 2021 No, sorry @knalle, that isn't supported. You're welcome to overlay something like that of course. Link to comment Share on other sites More sharing options...
knalle Posted April 22, 2021 Author Share Posted April 22, 2021 Thanks, will try something. Can you get all the addPause positions in a timeline? Guess I could use that to place them as indicators. Link to comment Share on other sites More sharing options...
Carl Posted April 22, 2021 Share Posted April 22, 2021 I would probably just place the addPause() at labels and then work with the .labels object rough demo See the Pen GRrPZJG?editors=0010 by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
GreenSock Posted April 22, 2021 Share Posted April 22, 2021 I like @Carl's idea. If you need to get the pauses, you could use this trick: const pauseTweens = tl.getChildren(false, true, false).filter(tween => tween.data === "isPause"); 3 Link to comment Share on other sites More sharing options...
knalle Posted April 23, 2021 Author Share Posted April 23, 2021 I used labels and added it this way: GSDevTools.create({animation:tl, minimal: true, container: "#devTools", globalSync:false, paused:true}); let labels = tl.labels; let totalTime = tl.totalDuration(); let timelineEl = document.querySelector('#devTools .timeline .timeline-track'); for (const label in labels) { let div = document.createElement('div'); div.innerHTML = label; div.classList.add('chapter'); div.setAttribute('style', 'left: '+labels[label] / totalTime * 100 +"%;"); timelineEl.parentNode.insertBefore( div, timelineEl ); }; And added some styling for the .chapter (position: absolute etc.) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now