Next div come from previous div top right corner

[rakibul-wdp]

I just need the "Hope you're fine :)" (section2) come from the "How are you ?" (section1) top right corner like the video example. How can I achieve that?

Video Example
Codepen Example

See the Pen qBxxabw by Evoroko (@Evoroko) on CodePen

[mvaneijgen]

Hi @rakibul-wdp What have you tried already? you're already tried some things that are not working, that way we can see your thought process and thus better help you.Please share a pen where.

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

And as a side note: the best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

[Rodrigo]

Hi,

 

You can  use a circular clip path with elements positioned absolutely, in order to stack one on top of the other. All you have to do is create a timeline in order to create the sequence you're looking for:

See the Pen QWJBjRO by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started.

Happy Tweening!