Jump to content
Search Community

Infinite Carousel with Draggable

tsimenis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone, 

 

I'm trying to create an infinite carousel following this

See the Pen ZOgGXB by osublake (@osublake) on CodePen

by @OSUblake.

You can see in the codepen that it does work but I have this weird bug that the item that needs to go in the beginning of the list gets updated too late(?)

I've been banging my head to understand what's going wrong, I feel I'm missing something simple so I thought maybe someone has a suggestion.

 

thanks

See the Pen aQYMNj by tsimenis (@tsimenis) on CodePen

Link to comment
Share on other sites

Hi @tsimenis,

 

Since the cracks still dream of Thanksgiving ...

 

Here, my suggestion

 

// alternative list, if you want the "1" on the first left position

list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"]


// left: -itemWidth 

TweenLite.set(this.$refs.list, {
  left: -itemWidth 
})

 

See the Pen VVxwQo by mikeK (@mikeK) on CodePen


Best regards
Mikel

  • Like 5
Link to comment
Share on other sites

  • 1 year later...
  • 5 months later...

Hey @ryancalderon and welcome to the GreenSock forums. Unfortunately we don't have the capacity to create every request that people put in these forums but we're happy to answer any specific questions that you have. Feel free to post a new thread with what you've tried, where you're stuck, and how you'd like our help (including a minimal demo related to that issue) and we'll do our best to help with whatever specific questions that you have.

Link to comment
Share on other sites

  • 2 years later...
On 8/14/2020 at 1:01 AM, ZachSaucier said:

I converted Blake's pen to GSAP 3:

 

 


Hello!

 

This tween has been very good for me.
They asked me for a "slider", with continuous autoplay and loop, which you can drag.
Also, to stop when hovering over the slider and play when leaving.

Also, they asked me to go from right to left, so I added the possibility to reverse it with the "direction" variable.

I've created this codepen and I'm leaving it here in case anyone else needs something similar or just to get some new ideas. All the best!

 

See the Pen zYLjYQV by animaticss (@animaticss) on CodePen

 

  • Like 3
Link to comment
Share on other sites

  • 4 months later...
On 1/25/2023 at 3:23 PM, AnimatiCSS said:


Hello!

 

This tween has been very good for me.
They asked me for a "slider", with continuous autoplay and loop, which you can drag.
Also, to stop when hovering over the slider and play when leaving.

Also, they asked me to go from right to left, so I added the possibility to reverse it with the "direction" variable.

I've created this codepen and I'm leaving it here in case anyone else needs something similar or just to get some new ideas. All the best!

Hello , 

I was just wondering if I can do exactly this but with reverse direction, like if someone is dragging to the left then the slider should autoplay from right to left and if dragging from left to right, then the slider should autoplays in that direction.

thanks in advance

Link to comment
Share on other sites

Hi @Harry J and welcome to the GreenSock forums!

 

I don't think the last example in this thread is designed to work the way you intend. Maybe a better option would be to use the Horizontal Loop function helper with a small update I made to it in order to change the direction based on the drag direction:

See the Pen mdzZXKm by GreenSock (@GreenSock) on CodePen

 

Now this example has some small changes I added to the helper function, so I can't guarantee that this is 100% bullet proof. In the tests I ran it seems to hold water. Here you can see the original version:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Hopefully this helps.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

22 hours ago, Harry J said:

Hello , 

I was just wondering if I can do exactly this but with reverse direction, like if someone is dragging to the left then the slider should autoplay from right to left and if dragging from left to right, then the slider should autoplays in that direction.

thanks in advance

 

Hello!

I've tried to play with simply changing the timeScale of the animation, but it doesn't quite work well:

See the Pen ZEqdMmr?editors=1010 by animaticss (@animaticss) on CodePen


I suppose that from my code of the previous version, what would have to be done is to kill the registered animation and register a new one with the new direction of movement, although I don't know if that would work either, that's what I can think of to try .

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Can anyone help me achieve this for my html setup please?

 

I do not want it to pause on hover, and when Throw i don't want it to stop. So basically the last example that @AnimatiCSS proviced, but for my HTML structure, and without the pausing on hover.

<div class="marquee">
  <div class="track">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</div>

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I change this demo to fit my list of requirements?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

2 hours ago, krause said:

Can anyone help me achieve this for my html setup please?

 

I do not want it to pause on hover, and when Throw i don't want it to stop. So basically the last example that @AnimatiCSS proviced, but for my HTML structure, and without the pausing on hover.

<div class="marquee">
  <div class="track">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</div>

Look, how about this:

See the Pen JjeGgyV by animaticss (@animaticss) on CodePen

Link to comment
Share on other sites

  • 5 months later...

Hello everybody, 

I'm also making a similar type of drag slider. I'm using AnimatiCSS pen (post above) as basis (thanks for setting this up by the way!). However my intention is to create a slider with videos that have variable widths, but all videos have the same height. I'm running into some trouble trying to fix this so that there is only a clean 20px gap between each video. Somehow the items all get a larger width so that an unwanted large whitespace between videos appears. This seems to be coming from the javascript, but I don't have enough skills to make this work. Is it possible to fix this or should all videos just be exactly equal proportions to make this whole set up work?

Here is my code-pen: 

See the Pen poGqReZ by edr2023 (@edr2023) on CodePen



Thanks very much in advance for any advice.
 

Link to comment
Share on other sites

Hi @lizettevanboom!

I'm fairly new to GSAP but ran into a similar problem myself yesterday - hope this might help.

I think the issue is with how you define itemW and/or use it in calculations done under allItems.forEach loop that sets initial width and height of all items - right now the width of each item is set to 1924px independent of the item's actual width (use chrome's inspect to see this).

I'm certain that there's a simple and efficient way to solve this but my solution was to simply utilise GSAP's seamlessLoop helper https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

The second demo there (

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

) has items of variable width with clean gaps.

Perhaps you can utilise the helper or just copy certain bits from it for your itemW calculations.

  • Like 3
Link to comment
Share on other sites

Hi @lizettevanboom and welcome to the GSAP forums!

 

In order to make the Endless Loop helper function work properly with elements with different widths, you have to wait for all the elements to be loaded. In the case of HTML media elements you should wait for the loadedmetadata event:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event

 

The Horizontal Loop Helper will handle the elements regardless of their widths, sure most demos use elements with regular known dimensions, but is not at all a constraint.

 

So when the metadata of all the videos are loaded you can create the instance of the Horizontal Loop:

const videos = gsap.utils.toArray("video");
const totalVideos = videos.length;
let loadedVideos = 0;

videos.forEach((video) => {
  video.addEventListener("loadedmetadata", () => {
    loadedVideos++;
    if (loadedVideos === totalVideos - 1) {
      // all the videos are loaded, create the Horizontal Loop
    }
  });
});

Hopefully this helps.

Happy Tweening!

  • Like 5
Link to comment
Share on other sites

  • 2 months later...

Hello,
I have been reading through this thread, which has been so helpful and informative — so thank you for all of these contributions.
I'm working on an infinite marquee, in a React app, and so I have turned to the horizontalLoop helper function for my purposes.
I am using the useGSAP() hook, and using the horizontalLoop function with some config options passed in.

This works but my marquee only completes two cycles and then stops. I haven't figured out why yet.

I am also trying to better understand how to call the horizontalLoop function within the useGSAP() hook, as someone very new to GSAP (using it for the first time in fact!). Could anyone tell me if I am using the hook correctly here?

 

import { useGSAP } from '@gsap/react'
import { useRef } from 'react'

import { gsap } from '@/lib/gsap'
import { horizontalLoop } from '@/lib/gsap/horizontalLoop'

import Card from './Card'

export default function Marquee({ items }) {
  const containerRef = useRef()
  // TODO Delay start by setting paused to false after an interval
  useGSAP(
    () => {
	// The class '.card' targeted is inside of the <Card /> component
      const cards = gsap.utils.toArray('.card')
      const horizontalLoopConfig = {
        draggable: true,
        paused: false,
        repeat: true,
        paddingRight: '32px',
      }
      horizontalLoop(cards, horizontalLoopConfig)
    },
    { scope: containerRef },
  )

  return (
    <div
      ref={containerRef}
      className="h-[100svh] w-screen flex flex-col pt-16 overflow-x-auto px-6"
    >
      <div className="h-full flex gap-8">
        {items.map((item, index) => (
          <Card key={index} item={item} />
        ))}
      </div>
    </div>
  )
}

Grateful for any pointers :) 

Link to comment
Share on other sites

I figured out the solution was setting the repeat prop to '-1'. My next block is that I have draggable: true, which works, but I would need the marquee to resume after a dragging event completes, I can't see yet whether the horizontalLoop helper accounts for that...

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.
×
×
  • Create New...