Jump to content
Search Community

Modifiers Plugin for Infinite Image Carousel

explorerzip 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

  • 1 month later...
1 hour ago, oscarsidebo said:

would your example be possible with boxes that have dynamic width?

Sure it is. But you'll have to calculate the start and end of the wrapping for each box individually. 

 

If you get stuck please create a minimal demo of your situation and ask a specific question for where you're stuck :) It'd probably be best to create a new thread also.

  • Like 1
Link to comment
Share on other sites

@web_roll yes, thanks for this! Allowed me to understand the mechanics.

 

With that said I don't quite understand how the x: `+=${totalWidth}` works. (I've seen this on all similar examples)

 

Since gsap.to() targets all children elements here I'm assuming the x: += syntax is making the value dynamic? 

If not how would it be different to just x: totalWidth ?

 

Link to comment
Share on other sites

9 hours ago, oscarsidebo said:

how the x: `+=${totalWidth}` works

The += operator adds the totalWidth value to the current x value to get the target (end) x value.

 

So each element is positioned based on the width of the elements before it. Then all of them are animated by the width of the entire set of words. The modifiers plugin then does the wrapping.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 months later...

Hi,

 

Is the ".box" element have to be absolute positioned to work? I was having trouble with the carousel and each individual box in my code is relative positioned as there are some absolute positioned texts on it. I noticed that for the same gsap tween, the change in "transform: translate()" property I inspected in devtools is different between relative positioned and absolute positioned elements.

 

EDIT: Okay, I forgot that absolute child element is positioned to the first non-static ancestors so the box can be absolute positioned as well. Still, I don't quite understand the behavior in the relative position case.

 

Here is related pen:

See the Pen XWpQjJz by tranhongquang94 (@tranhongquang94) on CodePen

 

Link to comment
Share on other sites

The calculations will be wrong with relative. The modifiers wraps based on the translated X position, but with relative, you would also have to take into account how far left the item is initially positioned.

 

BTW... this thread has a helper function that may be of use.

 

 

 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...
On 7/24/2019 at 4:14 PM, ZachSaucier said:

Hey @nolimit966

 

One way to smooth scroll on button hover would be to have the boxes animate the full wrapWidth on hover, binding the direction to each button. Then on mouseleave you kill the tweens. 

 

 

 

hi 

 

how can i implement this effect  with react js ? 

 

Link to comment
Share on other sites

On 10/14/2021 at 4:16 PM, Cassie said:

Hi Ouis,

 

Welcome to the forums. Maybe this article will help!
 

 

 thank you Cassie for the quick replay  , the article  was very helpful .

 

I have used gsap in several projects with react js , but i have an issue with implementing this piece of code.

 

I'm trying to build an auto play slideShow , and it's stop playing in hover , with scroll control  to the slideShow.

 

this is a simple exmple:

See the Pen bGrEvzV by ouis (@ouis) on CodePen

Link to comment
Share on other sites

Hi @ouis. It looks like there were a bunch of logic issues, React-related problems, no boxes were selected, and you were using VERY old syntax from before version 3. 

 

If I were you, I'd just use the helper function from the docs that handles looping things on the x-axis: 

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

 

Is that what you were looking for? 

  • Like 2
Link to comment
Share on other sites

3 hours ago, GreenSock said:

Hi @ouis. It looks like there were a bunch of logic issues, React-related problems, no boxes were selected, and you were using VERY old syntax from before version 3. 

 

If I were you, I'd just use the helper function from the docs that handles looping things on the x-axis: 

 

 

 

Is that what you were looking for? 

thank you very much GreenSock it solved all my problems .

 

i make it auto play and i'm trying to controlling it with scroll handler,

 

See the Pen porgmyx by ouis (@ouis) on CodePen

 

is there a way to make the slider scroll passed on how much px the user wheel the mouse

Link to comment
Share on other sites

18 hours ago, ouis said:

is there a way to make the slider scroll passed on how much px the user wheel the mouse

I assume you wanted something like this: 

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

 

I enhanced it by gradually speeding up or slowing down. You can tweak it however you want.

 

Strategy:

  • tween timeScale of the loop timeline. You can use a negative value to make it go in reverse.
  • Use a delayedCall() that you just restart whenever there's a wheel event so that after 1 second of inactivity, it fires off a timeScale tween back down to 0. 

Does that help? 

Link to comment
Share on other sites

On 10/18/2021 at 7:54 AM, GreenSock said:

I assume you wanted something like this: 

 

 

 

I enhanced it by gradually speeding up or slowing down. You can tweak it however you want.

 

Strategy:

  • tween timeScale of the loop timeline. You can use a negative value to make it go in reverse.
  • Use a delayedCall() that you just restart whenever there's a wheel event so that after 1 second of inactivity, it fires off a timeScale tween back down to 0. 

Does that help? 

thank you very much for the quick replay . you helped me alot. I really appreciate you

 

it's pretty much what i want to do 

Link to comment
Share on other sites

  • 1 month later...
On 10/18/2021 at 7:54 AM, GreenSock said:

I assume you wanted something like this: 

 

 

 

I enhanced it by gradually speeding up or slowing down. You can tweak it however you want.

 

Strategy:

  • tween timeScale of the loop timeline. You can use a negative value to make it go in reverse.
  • Use a delayedCall() that you just restart whenever there's a wheel event so that after 1 second of inactivity, it fires off a timeScale tween back down to 0. 

Does that help? 

thank you for your quick replay I really appreciate you.

But I'm facing a performance problem, it happens after a time of executing the slider, or after a little scroll.

It mostly happens when you reduce the speed of the slider from the code

 

It looks like it's moving in the shape of a block

 

I just changed the value PixelsPerScond in the horizontalLoop to :

  pixelsPerSecond = (config.speed || 1) * 50,
Link to comment
Share on other sites

15 hours ago, GreenSock said:

Hi @ouis - I read your post a few times but I don't really understand what you're saying. Can you please elaborate and make sure you provide a minimal demo and the steps to reproduce the issue? 

Sorry about that .

 

the demo i use is the same last codepen you shared here .

 

i upload a small video on Dropbox showing the error 

 

https://www.dropbox.com/s/mjnuvbxiffvfpwk/A-Pen-by-GreenSock-Google-Chrome-2021-12-04-13-33-11.gif?dl=0

Link to comment
Share on other sites

Sorry, @ouis, that doesn't help. It's not even a video. 🤷‍♂️

 

If you still need some help, please provide a minimal demo (with your changes) and very specific steps to reproduce the issue. If it's more of a logic problem, that's generally outside the scope of help we can provide here in the forums (please read the forum guidelines), but if it's specifically about GSAP or one of our tools, we'd be glad to answer those questions. 👍

Link to comment
Share on other sites

  • 5 months later...
On 10/18/2021 at 6:54 AM, GreenSock said:

I assume you wanted something like this: 

 

 

 

I enhanced it by gradually speeding up or slowing down. You can tweak it however you want.

 

Strategy:

  • tween timeScale of the loop timeline. You can use a negative value to make it go in reverse.
  • Use a delayedCall() that you just restart whenever there's a wheel event so that after 1 second of inactivity, it fires off a timeScale tween back down to 0. 

Does that help? 

I was looking for exact same thing like in your codepen and I was so happy, then I realised it's with react, and unfortunately I have no idea about react...All I know that useEffect is react-specific hook (I think).

 

Is there a version of this without using react? I tried to modify it myself (I thought I will just take out everything out of useEffect function and remove building of structure (as I already have structure in html) will work, but I was too naive to think it would be this easy.

 

If there's no version of this without react, can anyone point me in right direction and:

1st - confirm that it's just about the first function I should look at, and leave horizontalLoop alone?

2nd - My second guess is that it's about useRef() and root in the App function?

 

I will appreciate any kind of help.

Link to comment
Share on other sites

1 hour ago, Cassie said:

Heya!

 

The helper function used is here -

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

If you want to get rid of react in that demo, you're on the right track, pull everything out of the useEffect, get rid of the app function and use document.querySelector instead of refs ☺️

Awesome, thanks @Cassie!

 

I've managed to make it work with your help, it works on my localhost, but somehow doesn't work on codepen:

See the Pen RwQVXYd by thehaes (@thehaes) on CodePen

 - looks like it cannot find dom element? I tried with adding window.onload but it spits out same error. Weird.

 

Can you also point me which line is responsible for scroll velocity? It is late so I might be tired but I can't see it. I want to be able to control how fast the slider is scrolling left/right with mouse wheel.

 

EDIT: I found it!, it's in this line on 'wheel' event:

loop.timeScale(event.deltaY);

Just need to divide it by some numer (the bigger the slower it will be while scrolling), so for example:

loop.timeScale(event.deltaY / 10);

Again, huge thanks for pointing me in the right direction.

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