Draggable slider / carousel with timeline instead of tween

[knalle]

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.

 

See the Pen wvdJEXV by GreenSock (@GreenSock) on CodePen.

[Cassie]

var animation = gsap.timeline({paused: true, repeat: -1,})
    
animation.to(slides, {
  xPercent: "+=" + (numSlides * 100),
  duration: 1,
  ease: "none",
  modifiers: {
    xPercent: wrap
  }
});

Hi Knalle -  Sure. Like this?
 

[knalle]

Thanks @Cassie 

 

Tried it here with some more tweens:

See the Pen NWvRjJX by knalle (@knalle) on CodePen.

 

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);
});

 

[Cassie]

There's a huge amount going on in this codepen - It would take me quite a while to work out how everything's working.

It's often helpful to simplify things down a bit. At the heart it's just a timeline and the buttons/dragging are updating the progress.

Strip everything out and focus on getting the timeline working as you want it first!

See the Pen 07d8d1dcbea7d097592589ebcdeb52aa?editors=0011 by cassie-codes (@cassie-codes) on CodePen.

[GreenSock]

Yep, I agree with Cassie - it looks to me (from a cursory glance) like your timings are off. You're placing your animations into the timeline at the incorrect positions. 

 

If your goal is to build a timeline out like that, it might be helpful to use labels or something just to make sure things are being put where you THINK they should go. It looks to me like you're plugging numbers in (position parameter) that are based on some faulty assumptions(?)

 

I typically like to use a function that does all my animation for each particular slide, and I feed that the insertion point. So you can build a sub-timeline just for a single slide, and drop that into the master timeline. It just makes it easier to follow. 

 

Good luck!

[knalle]

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.

[knalle]

@Cassie and @GreenSock

 

The staggering in Cassie's example is extending the timeline, as you can see in the repeated timeline:

See the Pen KKvNYxp by knalle (@knalle) on CodePen.

 

Is it possible to wrap a timeline?

 

[GreenSock]

Again, your timings were incorrect

See the Pen vYJgOao?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

And like I advised earlier, it might be worth restructuring your code so that it's more focused on a per-slide sub-timeline like this: 

See the Pen PoKWqdP?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

At least for my brain, that's more intuitive. Maybe I'm weird though ?

[knalle]

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

 

See the Pen KKvaMVQ by knalle (@knalle) on CodePen.

[GreenSock]

That's actually a small bug in the distribute() utility function (used internally for stagger distribution) which is fixed in the next release but it's super simple to work around. Just omit from: "start" (because that's the default anyway). Or use from: 0. The bug only affects some string-based from values when no grid is used. 

 

Here's a fork where I also applied directional snapping (so when you slightly flick in one direction but it's not enough to get to the next slide, it won't snap backward to the current slide): 

See the Pen ZEJLJpz?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Better? 

[knalle]

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

[Cassie]

Hi Knalle,

 

I've read this a few times and I'm not certain what you're trying to offset?

Are you looking for the position parameter or are you trying to adjust where the slides start and end positions are?

[knalle]

@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]

If I understand you correctly (and I very well may not), there are several options:

1. Just use tweenFromTo() on your timeline with a repeat. Think of it like using another tween to animate the playhead of the timeline linearly.

   tl.tweenFromTo(0.5, tl.duration(), {repeat: -1});

    

2. When I find myself in that situation where I don't want the timeline to wrap all the way back to the beginning, I simply exclude that first chunk from the timeline altogether - I just do a normal tween or whatever is necessary to get it to the state where the repeat would loop back to, and then I create my repeating timeline from that spot. 

[knalle]

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

[GreenSock]

That's because on the Draggable the type wasn't set to "x", meaning it was sensitized to BOTH directions. That would make it impossible to allow native touch scrolling. Here's an updated pen:

See the Pen ZEJLJpz?editors=0010 by GreenSock (@GreenSock) on CodePen.

[knalle]

Ah, of course. I missed that one. Thanks 

[jenda]

Hello, 

 

a question. How could I automatically add bullet points and link them to the right slide? I would like to use the bullet points as a navigation.  

[OSUblake]

This should help you get started. Just style and position those buttons wherever you want.

 

See the Pen MWOLamV by GreenSock (@GreenSock) on CodePen.