[Pause timline only after tween is completed]

Hi there,

 

I have a timeline with repeat -1, wich i play/pause on mouseenter/leave of the container.

During the mouseleave event, I would to complete the fade-in animation of the image before pausing, to make sure I always have one image completly visibile. Any suggestions on how can I do that?

 

Thank you,

Roberto

See the Pen wvzQaMG?editors=1010 by robyy94 (@robyy94) on CodePen

[Frame animation - "freeze" some frames]

Hi there!

 

I'm trying to create a page like Airpods of apple. I'm starting from the codepen provided inside the ScrollTrigger documentation.

I would like to "freeze" some specific frame for a couple of seconds while scrolling (for example, the 10th frame for a couple of seconds), in order to have time to make some text caption enter on screen on that particolar point.

 

One solution could be to duplicate the same frame multiple times, but I would drasticaly increase the size of tha page. Could you help me find a better solution?

 

Thank you!!

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6?editors=0010 by osublake (@osublake) on CodePen

[ScrollTrigger with spa]

Hi there!

 

I'm using ScrollTrigger with BarbaJs, which basically on route change inject in the dom the content of the new route.

When the content change, ScrollTrigger doen't work very well, it doesn't watch for changes in the dom. I have tried using refresh, update, enable and disable, but when the content change it doesn't "reinitialize".

Is there any way I can completery "reset" the ScrollTrigger instance and reinitialize it on page leave/enter?

 

Thank you!

 

[Stop other animations on mouseover/leave]

Hi @Shaun Gorneau, hi @PointC

 

Thank you for you're reply! Both solutions works perfectly and help me to better understand how to managed Timeline or Tween.

 

Thank you again,

Roberto :)

 

[Stop other animations on mouseover/leave]

Hi there,

 

I have a sample question, maybe more related to javascript than to GreenSock.

I have created a simple list with 4 items, and added a simple tween on mouseover of each element. If you try to mouse hover all the elements of the list, while the first one is animating, it will run all the animations in sequence.

I don't want that this happen, but i want that if the cursor is on the first item, and i move it to the latest, only on the last item the animation start (maybe if another animation is already started, it should stop/reverse).

 

Hope I explain well my problem, if not just tell me and i will try to explain it again

 

Thank you all!!

See the Pen mKOJEm by anon (@anon) on CodePen

[Draggable broke layout]

Thank you @OSUblake and @GreenSock for your help.

Yes Osublake, I was trying to make it horizontal.. I know at the moment the layout it doesn't make sense, but it will

I have one last question. How can I hide the horizontal scrollbar? Using overflow-x: hidden on the container div "c-ingrediente" doesn't work, because it is overwritten to overflow-x: auto of Draggable.

 

edit:  codepen here: 

See the Pen LOYabz by robyy94 (@robyy94) on CodePen

 

Thank you!

[Draggable broke layout]

Hi Carl,

 

Thank you very much for your reply.
At the moment I have solved writing my own drag function, but I will really like to replace it with Draggable.

 

Let me know if you will find a solution.

Thank you again

 

[Draggable broke layout]

Hi Guys,

 

I'm trying for the first time the Draggable plugin, as you can see in the Codepen below. 

I want to create a slider, and allow user to swtich slide dragging them. I don't know why, but the plugin add some extra padding to the div inside ".slides", which completly broke the layout, because images should be 500px wide and not a couple of pixels.

 

Can you help me to understand what I'm doing wrong?

Thank you all!!

See the Pen mBgGvQ by robyy94 (@robyy94) on CodePen