Jump to content
Search Community

Rotate images around the text on scroll

Cartos test
Moderator Tag

Recommended Posts

Hi there, 

 

I'm an absolute beginner with GASP and all the JS animation stuff.

 

My aim is to have an animation where multiple images (pictures of my family) in the pinned container are rotating around some texts on scroll. They are also coming into container on the scroll. 

Please find my  video, I have to create similar effect. 

 

https://drive.google.com/file/d/1oqQjHKFTpQLAT-tSExKWMw6Nbq0HaeW8/view

 

 

Link to comment
Share on other sites

Heya Cartos!

 

If you're a beginner I would start off by just creating the animation. It's easy to hook animations up to scrollTrigger afterwards, so just focus on the animation for now.

Here's our getting started article.
 


Pop back with a demo showing what you've tried if you have any questions!


Have fun!

  • Like 2
Link to comment
Share on other sites

Thanks for reply @Cassie

 

Did you get a chance to look at the animation which is given in the shared link? I know create some animations but this looks little bit tricky. If you could tell me what animation component we need to use as I have been working on these last 5 days with no good result. 

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

@Cartos you are saying you've been working on it for 5 days? I would love to see a minimal demo of your work. Seems like a cool animation, but if your a beginner at GSAP it will be a up hill battle!

 

I my self like to create a lot of demo's before I start building the 'real' website and Codepen is a great place for that. You can easily fork you pens to keep trying out new things and share your code when you get stuck.

 

Also if you're new and need a quick turn around to get something off the ground I recommend picking up a GSAP course I myself started with https://www.creativecodingclub.com/bundles/creative-coding-club it gets you up and running in no time, but even than this seems like a complicated animation it is certainly possible with GSAP, but it would not be the first thing I would try with a new library I'm not familiar with.

 

Again if you want help here we really need to see some code in the form of a minimal demo to really help you.

  • Like 1
Link to comment
Share on other sites

Also - worth mentioning that we don't provide 'animation components'

 

We provide the tools used to create animations, but all the demos that people make with GSAP are custom to their use case. If we had an example that looked like this I would happily provide it for you.

As I mentioned, this looks like you'll need ScrollTrigger, but starting with ScrollTrigger is often the wrong way to approach things. Start off by creating a timeline that animates the elements in the way you're after.

If you're battling with that, as @mvaneijgen says, post a minimal demo showing your work so far and we'll give you a hand!

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...