[Pinned overlayed animations on scroll]

Thank you @Shaun Gorneau ! 
Sorry but I'm a newbie  Thanks for the corrections. 
I'll take a look to the pen.

[Pinned overlayed animations on scroll]

Hello everyone!
I am trying to make a sequential animation inside a pinned section where the plus icon finish to rotate from left to right and - when the animation is finished - the text block starts to appear till the end of animation. Now the animations seem to be synched.
I am using ScrollTrigger. 

Anyone can help? 

Thank you in advance!

See the Pen jOyXaam by scavaliere (@scavaliere) on CodePen

[Rotation wheel with different items inside]

Hello! 
I finally found a solution 
Thank you for all your suggestions !
I updated my final codepen on top!

[Rotation wheel with different items inside]

Thank you @mikel and @Shrug ¯\_(ツ)_/¯ ! 
I'll give it a try and I will post here back my solution!

[Rotation wheel with different items inside]

Hello @mikel! Thank you again. 
It's really near to what I need but the entire wheel should be draggable. 

[Rotation wheel with different items inside]

9 minutes ago, GreenSock said:

Howdy, @scavaliere. Are you saying that you want each element independently draggable? If so, just Draggable.create() for each one. 

 

If that's not what you want, could you please elaborate a bit? And it'd be cool if your demo showed the issue - currently there's no way to add anything so I don't see what you mean. We'd love to help, though.

Hello ! 
Thank you guys for all your support! 
I will try to elaborate a bit: I need a rotating wheel where every single div has a different rotation following a circle path. 
I don't need to drag a single element like @mikel has presented (thank you, anyway :)) 
The final effect should be like the pic I've attached.

I've tried to achieve this with some css transform for every div but I was wondering if it's possible to do it via GSAP dynamically. 

Hope it's more clear! 

 

[Rotation wheel with different items inside]

Hello @PointC,

thank you for the reply.
I've replaced the elements with colored divs. 

Hope you can help!

[Rotation wheel with different items inside]

Hello, 
I would like to make a "flower-like" rotation animation for my website.
I would need multiple items inside. I'm using Gsap TweenMax, Draggable and Inertia plugin. 
I have added the items as list and applied the draggable rotation on the ul. However I would need to add item in different position and rotation, in the attached codepen there's an example but when I add elements all the list rotate (with items all together) while I need single items rotating.

Anyone can help? 

Thank you in advance!

See the Pen KKaeyZj by scavaliere (@scavaliere) on CodePen

[Fade in and fade out elements sequentially with Scrolltrigger]

Hey @Carl ! Thank you for your prompt reply! 
Moving the script in the footer made it work. Really strange... 
Thank you again!

[Fade in and fade out elements sequentially with Scrolltrigger]

I attach here the image of what it happen.
It seems the start and end markers are overlapped and stuck at the top of the page. 

[Fade in and fade out elements sequentially with Scrolltrigger]

Hello again! 
I've activated markers and I noticed that, if on one hand the scroller-start and scroller-end markers appear, the start and the end trigger don't. 
I don't really understand why. It seems the trigger isn't active even if the div id is correct. 

[Fade in and fade out elements sequentially with Scrolltrigger]

Hello @Carl ! 
Thank you for your reply! I've used part of your reply to set what I really needed. Now on Codepen is working well and is updated so you can take a look.
However on my production site is not working and I get a console warning: 

gsap.min.js:10 GSAP target  not found.

referring to ".listone" div. But it is present in the section... I don't understand why on codepen is working and on my production site it gives me this warning. 

Any idea? 

Thank you again!

[Fade in and fade out elements sequentially with Scrolltrigger]

Hello, 
I'm trying to start a fade in a sequence of different divs on specific section with scroll trigger. 
In few words when a I reach a specific section, a list of 5 divs should appear sequentially with a little delay.
I tried to combine gsap.to with scroll trigger without results.

Anyone can help to figure out? 

Thank you in advance!
 

See the Pen WNRRBvM by scavaliere (@scavaliere) on CodePen

[Stop video on section leave]

Thank you very much @PointC! 
Your solution is working perfectly! 
Thank you everyone who gave me advices in this thread

[Stop video on section leave]

Hello! Thank you guys for your replies! 
I will try the @PointC solution and I'll let you know. 

[Stop video on section leave]

Hello, 
I'm trying to play a video entering a specific section and stop it when a section is left with GSAP ScrollTrigger. 
I have attached my codepen, hope someone can help me to figure out why it's not working. 

Thank you in advance!

See the Pen xxRNYQJ by scavaliere (@scavaliere) on CodePen