knalle

Thanks!

If i have a 5 seconds timeline I can use tweenFromTo / tweenTo with an easing (e.g. "Power3.inout" from time 1 to 2) to have a second of a timeline playing. But I cannot chain them like tl.tweenFromTo(0, 1, {ease: "Power3.inout" ).tweenFromTo(0, 1, {ease: "Power3.inout" ).tweenFromTo(.... Is there another approach to have a 5 second timeline "zoom" from each second to the next (0,1,2,3,4,5)? The timeline is a part of a master timeline.

https://codepen.io/knalle/pen/mdxWBLz Yay, made it work It is based on a couple of ScrollTrigger skew examples. I used a proxy for tweening the rotation based on InertiaPlugin tracking on the draggable. And changed quickSetter to quickTo. I think the performance is good and the "physics" effect is fine - but if anybody spots optimization opportunities in the code, please reply

Excactly what I mean. I wasn't expecting an out-of-the-box option. I looked into this, but my skills didn't get my anywhere

How would you add a rotation on drag. Like a swinging intertia on the images? That stops when you stop stop/pause the dragging motion. I have tried with quickTo combined with IneriaPlugin tracker, but I can't get et working

Ah, of course ? Simple solution, that does the trick! Thanks.

Can I limit the drag area and still have the the same animation (no hidden overflow)? So the drag trigger is not taking the full width og the container. Could I just create a trigger (div) that I set the style the width/height and placement of. (fixed now )

Thanks, but if I drag to the left it stops working?

I need a similar style of draggable as this old pen: https://codepen.io/ryjohnson/pen/pogqoPL/2b3fee8715f4d7c968f2395ff6d66159. But I would like to have it in GSAP 3 of course. I thought I knew what to change. But why isn't my pen working properly?

Thanks @GreenSock That was the behavior I was looking for - in the solution, that is... not talking about you :D ... oh well, you always help, so good behavior form everyone here!

Thanks @GreenSock and @Cassie I can see that it tries to limit the drag, however, in the examples I'm still able to swipe quickly and it scrolls through several slides?

I wasn't sure it was need this time But my request also applies to this one I found on the forum: https://codepen.io/glenn_pot/pen/VwKRpYe So the swipe and flick is fine, but I would like to limit it to one step. E.g. a fast flick on one 1 would still only get it to 2 (or card 7, is it's the other direction).

I have a infinite scrolling horizontal carousel/slider. Using Draggable (inertia: true, type:"x"). I like the flicking feature - but can I prevent that a fast flick scrolls through several slides?

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