Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nickycdk

Create this mouseover effect with tweenmax?

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

×