knalle

Yeah, that is what I wanted. Ok, I’ll find another solution.

I know I can set the timeScale on intiliasing: GSDevTools.create({animation:tl, minimal: true, keyboard: false, timeScale: 2, container: "#devTools", globalSync:false, paused:true}); How can I set it on elsewhere? I have tried setting vars.timeScale = 10 and calling update() on devtools, but it is not working all the time.

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

Thanks, will try something. Can you get all the addPause positions in a timeline? Guess I could use that to place them as indicators.

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.

Thanks @akapowl I ended up using solution 2. The icons where not nested in any "relative" DOM, so absolute position on them worked perfectly.

How can I have elements fixed on the page (icons here) and have them pin to elements in the bottom (e.g. instagram icon will be pinned to the "Instagram" text in the bottom). Demo gif attached.

Anybody have a good example of a design like this https://codepen.io/internette/pen/mwVKeQ with GSAP animating the points - like a soft wiggle ?

@GreenSock Do you think there is a good solution - where you don't know if the sidebar is higher or smaller than the viewport or the content height?

Thanks for trying 🙂 I was facing the same issue.

What if the sidebar is shorter? Like here: https://codepen.io/knalle/pen/GRjmMZv How do I get the bottom of the sidebar to end with the bottom of the content. Tried messing with the end trigger, but I couldn't wrap my head around it

@GreenSock Btw, how can I ease the "stick to top"? So the pinning is more "anticipated" and landing softly. Perhaps using another trigger and tweening the content of the pinned element?

@akapowl I tried that earlier and it did not help - but thank you for the quick reply! @GreenSock you were absolutely right on the money margin! It was the margin on the H1 ("FIX AREA" in the gif) that caused the jump! 😅 It should definitely be on the "Most Common ScrollTrigger Mistakes" list

Unfortunately I cannot make a simple CodePen, that has the same issue. And since the website is under construction sharing it here isn't possible - so the attached GIF is the best I can do Any ideas on why this happens? I have this code that gets my sections with data-pinned attribute: gsap.utils.toArray('[data-pinned]').forEach(function(elem) { ScrollTrigger.create({ trigger: elem, start: "top top", pin: true, markers: true, pinSpacing: false, }); });

Thanks @ZachSaucier Regarding next/prev question, I noticed the post was on ScrollTrigger and not Draggable. I guess the approach is similar. But I could just tween the Draggable target - and then update() the Draggable, right?