rotate rotate image out of viewport into the viewport as scrolling

[rohitsinghshan]

I wanna achieve this animation on the website https://www.dr-best.de/interdental/ where 2nd brush comes to the viewport as scrolling while rotating. I have achieved the 1st sticky brush animation but have a problem in the 2nd one

[mvaneijgen]

Could you share a demo of your code, this way you get better support on this forum.

Quote

Make a minimal demo

This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project.

 

If I take a wild guess of what I think you're having trouble with is `transformOrigin:"75% 100%"` this property allows you to specify a point of and element (for you an image) on which it rotates 

 

[rohitsinghshan]

1 hour ago, mvaneijgen said:

Could you share a demo of your code, this way you get better support on this forum.

 

If I take a wild guess of what I think you're having trouble with is `transformOrigin:"75% 100%"` this property allows you to specify a point of and element (for you an image) on which it rotates 

 

Thankyou for your reference sir, I have made codepen 

See the Pen dyJVaBV by shaan-singh (@shaan-singh) on CodePen

 

I want big light-blue toothbrush to work like a reference website. And if my script can be written in betterway then please tell me as I'm new to this

[mvaneijgen]

I've got something. Your brush was on the wrong side and was in the wrong orientation, so I've mirrored it, but that makes the text flipped. 

 

The rotation is now 180 degrees, way less then that and it also moves from the right in the original example.

 

See the Pen eYyGqRr?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[rohitsinghshan]

1 hour ago, mvaneijgen said:

I've got something. Your brush was on the wrong side and was in the wrong orientation, so I've mirrored it, but that makes the text flipped. 

 

The rotation is no 180 degree, way less then that and it also moves from the right in the original example.

 

 

 

Thanks sir, this only I have to achieve but this text are also overlapping and I don't know why. can you solve this also?

[GreenSock]

Hi @rohitsinghshan. weeding through almost 500 lines of HTML/CSS/JS to troubleshoot a custom implementation is a lot to ask in these forums (please read the forum guidelines) - if you'd like more help, you're welcome to post in the "Jobs & Freelance" forum for a paid consultant. Or if you have a GSAP-specific question (not custom logic), we'd be happy to answer those. 

 

Good luck with the project!