Jump to content
Search Community

Centering an animation on a selected element

dwyermt test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

This is my first post, so excuse the newb question. I want to select a div element (box), and when I click on my animate button, I want the animation to play on top of that element. Until now, I've just been animating static animations and have almost no experience with javascript. Is there a simple solution for this?

 

 

 

See the Pen EPPvyP by dwyermt (@dwyermt) on CodePen

Link to comment
Share on other sites

Hi dwyermt  :),

 

Welcome to the forums.

 

I wasn't quite sure what you meant, but is this what you're looking to accomplish?

 

See the Pen mVVBEo by PointC (@PointC) on CodePen

 

If that's what you need, you just have to put your SVG inside the box. Your SVG animation expands out of its viewBox so I had to set the overflow to visible otherwise it gets cut off a bit.

 

If I misunderstood what you needed, could you please expand a bit on what you'd like to accomplish? 

 

Happy tweening. :)

  • Like 3
Link to comment
Share on other sites

PointC, almost, but for example, I want to click on the first box, then click my animate button. The animation will then play on the first box. But if I click on the second box, the animation will play in the second box instead of the first.

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...