knalle

Ah, of course. I missed that one. Thanks

@GreenSock In the codepen you posted above - how can I make it possible to scroll on touch devices? I have tried allowNativeTouchScrolling (both false and true) but it did not solve it. been searching on the forum too, but haven't seen a working solution. If the carousel takes the full screen height of my iPhone I am stuck and unable to scroll (swiping vertically).

@Cassie yeah maybe If I have a 10 second "main" timeline I want to add an animation at 5 seconds that wraps/loops around - so the last 5 seconds starts a 0 seconds. So either I want to create an animation, that has the "time wrapped" before beeing added to the main timeline - or - somehow slicing the animation into two tweens . I have illustrated it here: http://thor.moumou.dk/gsap_screen1.png

@greensock Thanks. It works as expected now Is it possible to offset a timeline or a tween? Keeping the same duration "wrapping" the animation. eg. a tweening X 0 -> 100, and then offsetting it to from 50 to 50 wrapping from 100 to 0 (50->100->0->50).

@greensock thanks - I thought I had tried the correct timing by subtracting one from the total number of slides .... makes sense But if I add the codes for dragging the timings are wrong again. I cannot figure out where the mistake is. (comment line 45 and 46 to preview the timeline animation that seems right) https://codepen.io/knalle/pen/KKvaMVQ

@Cassie and @GreenSock The staggering in Cassie's example is extending the timeline, as you can see in the repeated timeline: https://codepen.io/knalle/pen/KKvNYxp Is it possible to wrap a timeline?

You are right! Thanks I think it is the wrapping (modifier), that I can't wrap my head around (pun perhaps intended :)) I tried another approach with no wrapping of the slides (since it isn't a requirement for the project I am working on). And the approach from my first reply is working there.

Thanks @Cassie Tried it here with some more tweens: https://codepen.io/knalle/pen/NWvRjJX Perhaps I am messing up here - but I can't get the timeline working with other tweens. animation.to(slides, { xPercent: "+=" + (numSlides * 100), duration: numSlides+1, ease: "none", modifiers: { xPercent: wrap } }); slides.forEach(function(elem,index) { //console.log( index ); slideContent = elem.querySelector("span"); animation.to(slideContent, { opacity:0, y: 100, duration: 0.5, }, index); });

I am struggling with a timeline as animation instead of a single tween. Is it possible to change: var animation = gsap.to(slides, { xPercent: "+=" + (numSlides * 100), duration: 1, ease: "none", paused: true, repeat: -1, modifiers: { xPercent: wrap } }); to a timeline, so I can add various tweens with slide content animation - having one single timeline for the slider.

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.