Jump to content
Search Community

reflect or mirror of bars animation

nene 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

Hello Nene

 

I'm not near my computer right now but to get a reflection in CSS you need to use -webkit-box-reflect and -moz-element:

 

See the Pen pgioE by jonathan (@jonathan) on CodePen

 

I haven't had time to convert to GSAP and make it animate.. but that is how you would get your element to reflect in CSS in Chrome and Firefox.

 

You could also try and do reverse clones if not using the CSS properties above to create the CSS reflection of an element.

 

I will look into your example when im in front of my computer again. Hopefully the above example gives you some ideas.

 

:)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan. Thanks for your reply. I have found a ittle more help. All I have done is use css (float and clear) divs for my purpose. Maybe now my big question is about what if the width data is not the same for both? p.e. div.clone:eq(0) != div.mirror:eq(0) width

 

How can I take two array values to populate the data in my animation, and both animations run at same time? Thanks

Link to comment
Share on other sites

Hello nene,

 

You can use the position parameter in your tweens.. just give them the same label name to have them play at the same time.

 

See the Pen YyqMNo?editors=001 by jonathan (@jonathan) on CodePen

.staggerTo( target, duration, vars, stagger, position )

like this:

TweenMax.staggerTo($(_clone), 1, {
  css:{
    width:'100%',
    backgroundColor:'#fff',
    borderColor:'#fff'
  },
  delay:0.015,
  //ease:Elastic.easeOut
}, 0.02, done,[1],"clone"); // same label name

TweenMax.staggerTo($(_mirror), 1, {
  css:{
    width:'100%',
    backgroundColor:'#fff',
    borderColor:'#fff'
  },
  delay:0.015,
  //ease:Elastic.easeOut
}, 0.02, done,[1],"clone"); // same label name

Is that what you wanted to do?

 

Reference:

GSAP Position Parameter: http://greensock.com/position-parameter

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