[Help me to achieve this click animation]

I tried this but the problem is I don't want to add another item or so, If users clicks on lets item in 2nd row I want to add a new row above 2nd row itself. 

[Help me to achieve this click animation]

I am trying to achieve this animation

 

I've a grid with 16 items, When I click any item of the grid I want to show a new row above the clicked item containing the row. I know this dose not have do anything with GSAP. But I can't figure out a way to do this.

Any help will be appreciated. Thanks in advance 

See the Pen KKxeLZm by midnightgamer (@midnightgamer) on CodePen

[collapse head when content within fixed height container being scrolled]

16 minutes ago, mvaneijgen said:

I've given your second .box an extra class and set this as the trigger. Than as soon as the box hits the top of the scroller element it will move the header -100% in the y direction. You could set this animation to what ever you want, but this shows you what the logic would be.   

 

Hope it helps and happy tweening! 

 

 

 

Thanks for helping me out, I did not knew concept of scroller it helped 

[collapse head when content within fixed height container being scrolled]

9 minutes ago, mvaneijgen said:

Hey, I'm not completely sure what you are trying to do. If you could clear that up with structuring your question as follows, it will really help giving you a better answer

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

If I read your question I think you want to change the scroller element, normally this is the viewport, but you can give it an element of your choosing

 

 

 

hey can you check question once again? I tried to make it more clear 

[collapse head when content within fixed height container being scrolled]

I want to achieve the following animation , but I am not sure how can i achieve the same when content within fixed height container are scrolled , so basically I want to collapse my "head" element when top of the 2nd box touch the bottom of "head" itself 

 

See the Pen qBKOEbx by midnightgamer (@midnightgamer) on CodePen

[Animation is not getting pin]

3 minutes ago, _Greg _ said:

Please check Documantation page of ScrollTrigger

There is no propery ping on ScrollTrigger, it must be pin: true

Damnnnnnn, sorry about this and thanks for help

[Animation is not getting pin]

I am new to GSAP and animation. I am trying to make really simple animation where I want to rotate the SVG while it is rotating I want to be PINED and once it complete rotating I want to release the pin and move to new section. I applied everything but for some reason it is not getting pinned.

See the Pen vYeMpdP by midnightgamer (@midnightgamer) on CodePen

[Flicker when animation marquee restarts]

I am trying to create a marquee animation, everything works fine but there is a flicker or something else you can see text shifting  when animation restarts. I am not sure what causing it. 

See the Pen gOxPEgZ by midnightgamer (@midnightgamer) on CodePen

[Looking for talented GSAP freelancers]

Hello Manil, I like this job post and clear most of criteria i.e my current work experience is  around 1 year and 9 months. I am familiar with GSAP as well using and learning from last couple of months. I'll get happy even if I get chance to appear in interview 

[Animation not working as expected scrollTrigger]

Hi, I am trying to add a sort of infinity scroll but before than I am stuck at the issue. In above pen i have 2 columns each have 16 images in it. I want to see all 16 images as i scroll down but it is not happening. I am pretty sure i using yPercetage is not the solution, but I don't know how to solve this.  And idea how I can convert this into infinity scroll as well?  

See the Pen vYymZbX by midnightgamer (@midnightgamer) on CodePen

[Slow scrolltrigger animation]

9 minutes ago, tailbreezy said:

A few things.

 

Moving your .para xPercent:100, moves it to the right by the value in offsetWidth which about 8000px.

Instead you can position it with left: "100%" to be right after the right edge — making it start immediately upon entering the trigger.

 

Additionally, if you want the animation to happen naturally you can to add that value (8000px) to the end marker of ScrollTrigger.

 

 

Oh thanks

 

[Slow scrolltrigger animation]

I am trying to move text from right to left on scroll but it going way to fast. I tried increasing height of section but it was not working as expected. Please help me out here.

See the Pen zYowxYY?editors=1111 by midnightgamer (@midnightgamer) on CodePen

[Bring height from top and than remove height but it should animate to bottom]

2 minutes ago, akapowl said:

Hey @midnightgamer

 

Since you are tweening on the height, changing your transformOrigin won't do much, because it doesn't work for height.

You could simply just tween on the scaleY instead.

 

Oh thanks for explanation .

 

 

[Bring height from top and than remove height but it should animate to bottom]

21 minutes ago, tailbreezy said:

 

Sorry but my container is not by default in view i need to use top:0; after using that this same thing is not working.

 

[Bring height from top and than remove height but it should animate to bottom]

I am trying to recreate a animation but I got stuck, I am trying animate overlays I want it to come from bottom when it increasing his height and it should go to top when decreasing the height of overlay.  Animation I am trying to recreate :  https://dribbble.com/shots/6711379-Xd-and-Protopie-make-a-great-combination

See the Pen OJbbdKj by midnightgamer (@midnightgamer) on CodePen

[A weird behavior when trying to implement a simple tween]

I am trying recreate one dribble animation By Akram Khalid, When I tried to implement very first tween it working halfway fine then it suddenly completing whole animation. I am using npm package with parcel-bundler.  

See the Pen MWbyrRz by midnightgamer (@midnightgamer) on CodePen

[Move image as mouse moves]

1 hour ago, GreenSock said:

Hey @midnightgamer. I'm a bit confused - doesn't the article explain everything? https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/

 

Was there a GSAP-specific question we could help you with? 

It dose explain but I the function for getting image follow the cursor is quite confusing and complex at same time, I think there is some simple way but I don't exactly. 

[Move image as mouse moves]

I am trying to recreate a Codedrop post to learn and understand GSAP better, I am stuck at one point where when I move my mouse on any link the image should follow mouse as well mouse should be pointing to center of image. I figure how to move image but I am not able to position it very well . 

See the Pen YzpPzqw by midnightgamer (@midnightgamer) on CodePen

[How to undraw svg based on scroll progress]

2 hours ago, mikel said:

Hey @midnightgamer,

 

I don't really understand your intention.
As I said, a simple example would help.
Here is a case where elements appear (instead of disappearing) in the scrolling process.

 

 

 

 

Happy tweening ...

Mikel

 

 

44 minutes ago, ZachSaucier said:

I'd guess that you should set up a ScrollTrigger for each section and then do what mikel is doing in that case. As he said, if you'd like a more help a minimal demo would be very helpful.

See the Pen RwobvNX by midnightgamer (@midnightgamer) on CodePen

 

 

In this codepen I used code given by @mikel and added some thing what i need is when we scroll down and green triangle reaches red circle it should undraw just like the line.

[How to undraw svg based on scroll progress]

28 minutes ago, mikel said:

Hey @midnightgamer,

 

A reduced case would be more helpful.
So here's a simple version.
Note the structure of the path: from below!

 

 

 

 

Happy tweening ...

Mikel

 

Thanks mike but this idea is not working from me as .draw not a single svg. It is array of svgs which i am trying to undraw as hand reach near the particular item. You can see animation when page load , I need revers the same animation but using scroll trigger. 

[How to undraw svg based on scroll progress]

Hi everyone, I am trying to get hands on scrollTrigger so I took a pen and tried to apply some tweens. I am successfully moving hands as I scroll down. What I want is to undraw the line as I scroll down. I tried but it didn't worked. Help me out and if there is something is wrong in my code please correct me.

See the Pen ZEBzxON by midnightgamer (@midnightgamer) on CodePen

[How can I achieve following animation]

Just now, mikel said:

Hey @midnightgamer,

 

Check this example. Any Questions ?

 

 

 

 

Happy tweening ...

Mikel

 

You any place where I can all these stuff. I am new in GSAP I want to learn GSAP for my career improvement. Do you know any platform or course that I can  buy?

[How can I achieve following animation]

15 minutes ago, mikel said:

Hey @midnightgamer,

 

Please show us your attempts in the CodePen.
Comment on your problems ...

 

Every attempt brings you further

Mikel

First I tried your solution It was working fine for first section others were behaving strange then I added one class to each section set trigger to that class yet It didn't work. Then I tried to use forEach with ScrollTrigger.Create  but I was not clear with concept so I skipped it. Lastly I duplicated same code 4 times and trigger each section by thier ID yet it didn't work. I don't have code as undo all the changes.

[How can I achieve following animation]

On 10/1/2020 at 5:54 PM, mikel said:

Hey @midnightgamer,

 

Just another approach ...

 

 

 

 

Happy studying ...

Mikel

This is nice but I want text box in each section and each section should behave like current effect. I tried with your code and try to figure some way out but fail It would be great if you help me out here.

 Thanks

[How can I achieve following animation]

https://www.abc.net.au/news/2020-08-06/coronavirus-treatments-and-covid19-cure-research/12527034?nw=0  This is the refence website I want recreate white box with text. Left side is short of fixed but on scroll other white-boxes are appearing.

 

Thanks for help.