Jump to content
Search Community

Create this mouseover effect with tweenmax?

nickycdk test
Moderator Tag

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

Im pretty new to tweenmax, and i was wondering how to create an mouseover effect like seen on this page (hover over the images) : http://www.fcinq.com/ (scroll down to the work)

 

They are using this in the css:

transform: scale(0.25, 0.1);
transition: background 0.3s linear 0s, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
 
and on the hover:
transform: scale(0.7);
transition-delay: 0.2s;

 

However, I have no idea how to do this in TweenMax?

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Since there are multiple items animating when you rollover and you probably want the same animation to reverse when the user rolls out, you should probably use a TimelineLite.

 

This small demo shows how you can give multiple elements the same animation style on hover:

http://codepen.io/GreenSock/pen/8f950d4999211269ca8bfe1dd98c42e8

 

If you need more help, please fork that codepen and add your own html, images, css.

 

 

To get up to speed quick with the TimelineLite syntax please watch:

http://www.greensock.com/sequence-video/

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