Jump to content
Search Community

Overflow: Hidden

Susan 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

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

Link to comment
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
Link to comment
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.

 

See the Pen YEjRGp by susansiow (@susansiow) on CodePen

 

Please help further, thank you!

Link to comment
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.

 

See the Pen bYjzxR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
  • Thanks 2
Link to comment
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.

 

See the Pen 77a1dbdb7573a15850e14fbb69ea3bd1 by osublake (@osublake) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...
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.

Link to comment
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.

 

See the Pen 77a1dbdb7573a15850e14fbb69ea3bd1 by osublake (@osublake) on CodePen

 

 

 

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

 

Link to comment
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.

 

See the Pen 77a1dbdb7573a15850e14fbb69ea3bd1 by osublake (@osublake) on CodePen

 

 

 

@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} );

 

 

See the Pen NwVoMX by susansiow (@susansiow) on CodePen

 

Kindly advise, thank you very much!

Link to comment
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!

Link to comment
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
Link to comment
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

Link to comment
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
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...