Jump to content
GreenSock

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

How to get two layers of animation with different opacity

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

I have two classnames (.line-one and .line-two) and want them to give two different opacities, but only the latest classname will be showing in this case. How get I this two class names animating at the same time?

See the Pen vrWQao by chichichi (@chichichi) on CodePen

Link to post
Share on other sites

You dont animate opacity there (in your code). you create elements with only .line-one classname and then animate x/y position.

Looks like you need to randomize creation (with different class name), not className animation...

 

  • Like 1
Link to post
Share on other sites

But how do I run two different classnames at the same time, which both have different opacities. 

Link to post
Share on other sites

I'm kind of confused by what you mean by "how do I run two different classnames at the same time".

If the demo below is what you want, let me know if you need help understanding how it works

 

See the Pen LrOKbB?editors=0011 by GreenSock (@GreenSock) on CodePen

 

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

×