[Rotate on Mouse]

2 hours ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Thx for clarifying,

Here is a code example :

https://stackblitz.com/edit/nextjs-6qwxma?file=pages%2Findex.js

The problem appear even if I remove the first component, (only one lines component), I think because I'm putting the component at the end of the page

[Rotate on Mouse]

On 5/15/2017 at 3:40 PM, OSUblake said:

GSAP is not going to help you out much here. You have to find the angle from the absolute transform origin to the mouse for every thing you want to rotate.

 

var dx = mouse.x - origin.x;
var dy = mouse.y - origin.y;
    
var transform = "rotate(" + Math.atan2(dy, dx) + "rad)";
element.style.transform = transform;

 

So something like this, although I'd probably use canvas for this many elements.

 

 

 

This very helpful thx,
but when I use this functionality in two different component in the same page the second component won't rotate the lines (I'm using Next.ts)

the first one work perfectly tho, can anyone help me plz?

  

[Modifiers Plugin for Infinite Image Carousel]

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

[Modifiers Plugin for Infinite Image Carousel]

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,

[Modifiers Plugin for Infinite Image Carousel]

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 

[Modifiers Plugin for Infinite Image Carousel]

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

[Modifiers Plugin for Infinite Image Carousel]

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

[Modifiers Plugin for Infinite Image Carousel]

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 ?