Susan

Overflow: Hidden

Recommended Posts

Hi GreenSock,

 

First of all, I would like to thank you for your amazing JS library! It allows me to create a pretty web animation in a short time, thank you!

 

Here's the progress - https://z1.golddigitaldesign.com/ and enclosed is a screenshot which is showing the skewed background image is overflowed.

 

CSS codes:

#left-1-wrap {
    position: relative;
    overflow: hidden;    
}
#left-1 {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    -ms-transform: skewY(-80deg); 
    -webkit-transform: skewY(-80deg); 
    transform: skewY(-80deg);
        
    transition: all 0.5s ease 0s;
}

 

TweenMax codes:

 

TweenMax.to("#left-1", 20, {skewY: '360deg', rotation: -180, ease: Power0.easeOut, repeat:-1} );

 

Is there anything that I can do to prevent the overflowing over the Y axis? Or is a normal case and no further adjustments is needed?

 

Thank you!

 

3.jpg

Share this post


Link to post
Share on other sites

First of all, welcome to the forums! Glad to hear you're enjoying GSAP.

 

It looked like you were missing some positioning on the main-wrap element, like position:relative and overflow:hidden. This certainly looks like a general CSS question rather than a GSAP one. We try to stay focused on GSAP questions around here just because we don't have the resources to answer more general questions. 

 

I also noticed that you have a "transition" applied in your CSS on the same element you're trying to control with GSAP. That will definitely cause problems because every time GSAP makes a change (60 times per second), it'll start transitioning again and again for 0.5 seconds each, thus you'll probably find that it looks like your animations are taking way too long and have a strange ease to them. That's all due to the conflicts between CSS transitions and GSAP both trying to control the same thing. 

 

Happy tweening!

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you @GreenSock !

 

No wonder the background animation appears shaky occasionally.

 

May I know how I can incorporate the following code with GSAP, so it will not cause conflicts?

 

transition: all 0.5s ease 0s;

 

Share this post


Link to post
Share on other sites

Remove that completely if you want GSAP to do the animation. It's one or the other - can't have both :)

  • Like 4

Share this post


Link to post
Share on other sites

Hi GreenSock,

 

I have removed the CSS transition code

 

transition: all 0.5s ease 0s; 

 

and edited the TweenMax code

 

TweenMax.fromTo("#left-1", 20, {opacity: 0.3, skewY: '30deg', rotation: 80, ease: Power0.easeIn} , {opacity: 1, skewY: '360deg', rotation: -10, ease: Power0.easeNone, repeat:-1} );

 

Is this correct?

 

And how can I apply a smoother background transition? I have tried the GreenSock's easing alternatives but the background still doesn't repeat/transit smoothly.

 

 

Please help further, thank you!

Share this post


Link to post
Share on other sites

When you use repeat on any tween, it will repeat same animation. Such cases can be handled using different approaches, but always depends on animation. You can use recursive function that will get called every time animation completes and instead of using absolute values, you can use '+=10' which will take whatever current value is and animate it with +10.

 

I am using TweenMax.delayedCall() method instead of timeout or interval because in complex animations it gives you control over everything.

 

Also, you can't have separate eases for from and to parameters. You seem to have wrong idea about easing, easing just defines how entire animation is going to calculate, so it basically eases animation itself nothing else.

 

 

  • Like 3
  • Thanks 2

Share this post


Link to post
Share on other sites

Just a note about skew. The way CSS handles skew causes the object to scale. GSAP can skew like that if you pass in skewType as "simple" or set the CSSPlugin.defaultSkewType = "simple". See the section on 2D transforms in the CSSPlugin for more info.

 

Comparison of skew types.

 

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites
9 hours ago, Sahil said:

I am using TweenMax.delayedCall() method instead of timeout or interval because in complex animations it gives you control over everything.

 

You could just call the function directly since you're not using a delay.

function animateBg(){
  TweenMax.to("#left-1", 20, {
    opacity: 1, 
    skewY: '+=360deg', 
    rotation: '+=10', 
    ease: Power0.easeNone, 
    onComplete: animateBg
  });
}

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites
On 11/28/2017 at 12:16 AM, OSUblake said:

 

You could just call the function directly since you're not using a delay.


function animateBg(){
  TweenMax.to("#left-1", 20, {
    opacity: 1, 
    skewY: '+=360deg', 
    rotation: '+=10', 
    ease: Power0.easeNone, 
    onComplete: animateBg
  });
}

 

 

Thank you so much for the enlightenment.

Share this post


Link to post
Share on other sites
On 11/28/2017 at 12:11 AM, OSUblake said:

Just a note about skew. The way CSS handles skew causes the object to scale. GSAP can skew like that if you pass in skewType as "simple" or set the CSSPlugin.defaultSkewType = "simple". See the section on 2D transforms in the CSSPlugin for more info.

 

Comparison of skew types.

 

 

 

 

@OSUblake This is something I have been searching for high and low, zillion thanks for this!!!

 

Share this post


Link to post
Share on other sites
On 11/28/2017 at 12:11 AM, OSUblake said:

Just a note about skew. The way CSS handles skew causes the object to scale. GSAP can skew like that if you pass in skewType as "simple" or set the CSSPlugin.defaultSkewType = "simple". See the section on 2D transforms in the CSSPlugin for more info.

 

Comparison of skew types.

 

 

 

 

@OSUblake 

 

After some further experiments, here are some queries:

 

1. I have changed the repeating number from infinite to 2 times but it is still animating unceasingly. Am I missing something here?

 

var tl = new TimelineMax({ repeat: 2})

 

2. How can I create a layer to layer infinite repeating animation (from left-1.png to planet.jpg to left-1.png) with the following code? I have tried to check from the CSSPlugin documentation but not found. 

 

function animate(target, skewType) {
  var tl = new TimelineMax({ repeat: 2})
    .to(target, 3, { skewType, skewX:  90, repeat: 1, yoyo: true }, "+=0.2")
    .to(target, 3, { skewType, skewX: -45, repeat: 1, yoyo: true })
    .to(target, 3, { skewType, skewY:  90, repeat: 1, yoyo: true }, "+=0.2")
    .to(target, 3, { skewType, skewY: -45, repeat: 1, yoyo: true })
}

 

Furthermore, I have added this line to execute a delayed animation for planet.jpg but it breaks the whole JS coding.

 

TweenMax.fromTo("#left-1", 30, {opacity: 0}, {opacity: 1} );

 

 

 

Kindly advise, thank you very much!

Share this post


Link to post
Share on other sites

You had missing quotes and comma on line 9, I have changed timescale so you can see that animation stops after repeating twice. Didn't really understand your question about infinite repeating animation.

 

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
46 minutes ago, Sahil said:

Didn't really understand your question about infinite repeating animation.

 

Thanks for the kind help! 'Infinite repeating animation' means I would like to create a repeating multiple objects - #left-1 to #planet to #left-1. Which means when #left-1 has completed 2 times of animation, then #planet will take place (eg also 2 times of animation) and followed by #left-1 and so on (followed by #planet).

 

How can I achieve such repeating animation sequence with GreenSock JS?

 

Thank you!

Share this post


Link to post
Share on other sites

I tried editing your pen, but it just seems too complex along with issues in css, html. I will post few links to video tutorial, that should cover most of the basics about how you can repeat animations etc and how to create complex animations with functions. I hope you will go through these tutorials, otherwise it just opens door for more questions. Also, try to post your questions with as simple example as possible with reduced codepen demo specific to the question. It makes it a lot easier to answer and will also help you understand quickly.

 

https://www.youtube.com/watch?v=sXJKg8SUSLI

 

https://www.youtube.com/watch?v=tMP1PCErrmE

 

https://www.youtube.com/watch?v=QO1mLs96krY

 

https://www.youtube.com/watch?v=ZbTI85lmu9Q

 

https://www.youtube.com/watch?v=8ETMjqhQRCs

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites
32 minutes ago, Sahil said:

I tried editing your pen, but it just seems too complex along with issues in css, html. I will post few links to video tutorial, that should cover most of the basics about how you can repeat animations etc and how to create complex animations with functions. I hope you will go through these tutorials, otherwise it just opens door for more questions. Also, try to post your questions with as simple example as possible with reduced codepen demo specific to the question. It makes it a lot easier to answer and will also help you understand quickly.

 

https://www.youtube.com/watch?v=sXJKg8SUSLI

 

https://www.youtube.com/watch?v=tMP1PCErrmE

 

https://www.youtube.com/watch?v=QO1mLs96krY

 

https://www.youtube.com/watch?v=ZbTI85lmu9Q

 

https://www.youtube.com/watch?v=8ETMjqhQRCs

 

This is very helpful, thanks @Sahil

Share this post


Link to post
Share on other sites

Did you get everything working? 

 

One thing to note is the way I wrote that function in my demo will only work in modern browsers. It would be better to write the function like this.


function animate(target, skewType) {
  
  var tl = new TimelineMax({ repeat: 2})
    .to(target, 3, { skewType: skewType, skewX:  90, repeat: 1, yoyo: true }, "+=0.2")
    .to(target, 3, { skewType: skewType, skewX: -45, repeat: 1, yoyo: true })
    .to(target, 3, { skewType: skewType, skewY:  90, repeat: 1, yoyo: true }, "+=0.2")
    .to(target, 3, { skewType: skewType, skewY: -45, repeat: 1, yoyo: true })
  tl.timeScale(10);
}

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

@OSUblake The previous code looks great on modern browser, thank you for providing the new codes which are compatible with different versions of browser.

Share this post


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.