Jump to content
Search Community

Scaling to specific width and height

Lars Johan test
Moderator Tag

Recommended Posts

I am trying to get this to work:

 

$('#something').hover(function(){
  gsap.to(this,{duration: 1, width: 200, height: 200,  transformOrigin: "center center"});
  }, function(){
  gsap.to(this,{duration: 1.2, scale:1, transformOrigin: "center center"});
});

 

But my syntax don't seem to be quite right?

 

Essentially I want many different elements of different sizes (containing jpg-images, if that matters) to scale up to the same size 200x200px when hovering over them. They scale down to their original size when mouse leaves them.

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo -  Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

Also, it looks like you're animating width/height in one tween but scale in the other but those are completely different things so after you hover over/off, you'll never see a change again because those values will match. And transformOrigin is only relevant for transform-related stuff like scale (NOT width/height). 

 

Once we see your demo, I'm sure we'll be able to offer better advice. 

Link to comment
Share on other sites

Sorry.

 

Here's a demo. I would like to achieve three things.

 

1) Scale to same size, no matter original size of the element (example: 400px width and 400px height)

2) Making all other objects fade while not being hovered upon (when one is) (maybe simple as CSS "*:not(this)"?)

3) If element is clicked, then move it to the center of the viewport while all other elements fade and, in that state, if I click outside of this element then everything reverts back to normal

 

See the Pen poLBYyN by larshallen (@larshallen) on CodePen

Link to comment
Share on other sites

Hey there!

 

So for number one - I would set up your SVG so that all the elements are the same size.

 

Then you can use gsap.set to set them all up as different sizes and just animate them to scale:1

 

//set up your sizes
gsap.set('.circle-1', {scale: 0.2})
gsap.set('.circle-2', {scale: 0.7})
gsap.set('.circle-3', {scale: 0.4})
// etc

// then animate to the standard size
let circles = gsap.utils.toArray('.circle')

circles.forEach((circle) => {
  
  let scale = gsap.to('.circle-1', {scale: 1, paused: true})
  
  circle.addEventListener('mouseenter', (e) => scale.play());
  circle.addEventListener('mouseleave', (e) => scale.reverse());
})


The other questions are kind of getting into the realm of custom logic - we try to keep the forums focused on questions specific to the GSAP API. But I can give you some nudges!


Sounds like a good starting point! Give it a bash

Quote

Making all other objects fade while not being hovered upon (when one is) (maybe simple as CSS "*:not(this)"?)

 

3) If element is clicked, then move it to the center of the viewport while all other elements fade and, in that state, if I click outside of this element then everything reverts back to normal

Sounds like this may be a job for FLIP?

Alternatively you could just work out how much each circle needs to more to 'center' it and then hard code values for each circle as SVG is responsive so the distance isn't going to change!


https://greensock.com/docs/v3/Plugins/Flip/

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