Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
knalle

Draggable slider / carousel with timeline instead of tween

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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?
 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 🤔

  • Like 2
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

  • Solution

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? 

  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

@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

 

 

 

Link to comment
Share on other sites

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. 
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×