Jump to content
GreenSock

phillip_vale

Unfolding div

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

Hi there,

 

I am trying to make 3 divs fold out from under one another and was going quite well until i noticed that the divs are sort of flickering when they get to the end of their transitions. Any help is appreciated!

 

Thanks,

 

Phil

See the Pen jAmEgb?editors=0100 by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites

Hello phillip_vale, and Welcome to the GreenSock Forum!

 

I did not see a flicker in latest Firefox and Chrome on Windows 7 (64-bit).

 

But i did see was that once each fold tile got 75% in its rotation, it snapped the rest of the 25%. 

 

You can see it better if you increase the duration and stagger delay from 0.5 to 1.5.

 

This looks like a browser rendering bug.. What is the browser you are seeing this in?

 

:)

  • Like 1
Link to comment
Share on other sites

Yep - I see the same thing Jonathan is seeing. No flicker at all, but the divs snap at the end of their rotation.

 

I tested in FF, Chrome and Edge. Windows 10.

 

:)

Link to comment
Share on other sites

OK phillip_vale,

 

Try this:

 

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

 

You need to adjust your CSS and JS. Meaning your position offsets and adding the right perspective.

 

You will need to reset all your position offsets to left:0 for #main div in your style-sheet.

 

And use CSS transforms to translate the 2nd and 3rd tile door. Then when each rotates it will animate all the way and interpolate all the way closed.

 

But you must use perspective on the parent and don't use transformPerspective on the tile door <div>'s. So the perspective can properly get the effect you want. Or you will have to use a staggerFromTo() so you define your start and end values.

  • persepctive: applies to the parents immediate children
  • transformPerspective: applies to the element it is applied to

I used the GSAP set() method to apply perspective only on the #main, which is the div's parent

 

So all together it will look like this:

var tl = new TimelineMax({
  repeat: -1,
  repeatDelay: 2
});

// Use perspective on parent #main instead of transformPerspective
TweenMax.set("#main",{perspective: 1000});

tl
  .staggerFrom("#main div", 1.5, {
    transformOrigin: "left center",
    autoAlpha: 0,
    ease: Power2.easeInOut,
    transformStyle: "preserve3d",
    rotationY: 180 // do not use negative rotation in this case
  }, 1.5);

And your CSS should be this for each tile door

#main div {
  width: 100px;
  background-color: #F00;
  height: 250px;
  position: absolute;
  top: 0;
  left:0; /* left gets added for all child div tags */
}

#main div:nth-child(1) {
 /* left: 0;*/
  -webkit-transform:translateX(0px); 
  transform:translateX(0px);  /* use translateX() for initial position */
  z-index: 300;
}

#main div:nth-child(2) {
  /*left: 100px;*/
  -webkit-transform:translateX(100px);
  transform:translateX(100px); /* use translateX() for initial position */
  z-index: 200;
}

#main div:nth-child(3) {
  /*left: 200px;*/
  -webkit-transform:translateX(200px);
  transform:translateX(200px);  /* use translateX() for initial position */
  z-index: 100;
}

If you want GSAP to handle the cross browser transforms so you dont have to include webkit.

 

Then you can use the GSAP set() method instead and GSAP will add the vendor prefixes for you when needed:

TweenMax.set("#main div:nth-child(1)", { x: 0 });
TweenMax.set("#main div:nth-child(2)", { x: 100 });
TweenMax.set("#main div:nth-child(3)", { x: 200 });

Resources:

GSAP set() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

CSS Perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

 

:)

  • Like 2
Link to comment
Share on other sites

I just looked at your codepen, and did the following:

tl
  .staggerFromTo("#main div", 0.5, {
    transformOrigin: "left center",
    autoAlpha: 0,
    ease: Power2.easeInOut,
    transformPerspective: -1000,
    transformStyle: "preserve3d",
    rotationY: -180,
  }, {
    transformOrigin: "left center",
    autoAlpha: 1,
    ease: Power2.easeInOut,
    transformPerspective: -1000,
    transformStyle: "preserve3d",
    rotationY: 0,
  }, 0.5)

So if you do not want (or cannot) change the CSS, just change the JS.

 

Another advice: to create the folding effect, change the rotationY (in the "from" part of the .staggerFromTo()) to -90 from -180, because the first div's back can be seen before it folds in.

  • Like 2
Link to comment
Share on other sites

Thanks so much for all the input. I was asleep while all of this was happening! I probably could have described it better, i was talking about a flicking not a flickering and the snapping is a much better description. All of these posts are brilliant. I might push further in the project and post again soon. Thanks all, Phil

  • Like 1
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.
×