Jump to content


Create this mouseover effect with tweenmax?

Moderator Tag

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:



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:


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.