Jump to content
Search Community

Animation Custom ease Problem

gsmas 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

 

I am testing some animation possibilty. I am trying custom ease effect. It does not function. I am stucked here.

The codepen link shows the aninmation. First the textimage Just a test is functioning but after that the image This is another image does not funktion.

image2 should be appear after Just a test shown completely. That means the img2 should delay. The second problem is the imge two should be bigger and cover the whole area (300x250) and than come to the original size as we see here.

 

Thanks a lot

 

 

See the Pen ZRmvmN by gsmas (@gsmas) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

 

The main problem is that in order to use CustomEase you must load the CustomEase.min.js file.

 

I added it to your CodePen and it works now

 

See the Pen KebPdE?editors=1010 by GreenSock (@GreenSock) on CodePen

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js

 

This page here explains how to get all the URLs of the bonus plugins to use on CodePen: https://greensock.com/try-plugins

 

If you want your second TweenMax animation to wait until the first animation is done playing, you will need to add a delay

 

TweenLite.to( "#img2", 2.5, {ease:CustomEase.create("custom", "M0,0,C0.127,0.382,0.284,0.674,0.444,0.822,0.638,1.002,0.961,0,1,0"),y: -500, delay:3});

 

 

 

 

 

For building sequences, we recommend using Timelines. Definitely check out:

https://greensock.com/get-started-js

https://greensock.com/timelinelite

 

If you don't want to see #img2 until it animates up and down, you will need to also set its opacity to 0 or visiblity:hidden somewhere in your css and then make it visible in your animation code.

 

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

below is a basic sequence that

  1. moves a green div
  2. makes orange div visible
  3. moves the orange div
var tl = new TimelineMax({repeat:4, repeatDelay:1});

//add 3 tweens that will play in direct succession.
tl.to(".green", 1, {x:200}) //move the green div
  .set(".orange", {opacity:1}) //show the orange div
  .to(".orange", 1, {x:200}); //move the orange div

 

 

See the Pen BVGxZd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

Dear Carl,

Many Thanks for your explaination. I donot see any changes in the Codepen. The #imge2 remain the same. No animation on image2. Normally it will cover the whole area and come to its original size. I have click on the codepen. Which codepen have you changed.

I have added the CustomEase.min.js file in my document but nothing happend.

Thanks a lot.

 

  • Like 1
Link to comment
Share on other sites

Dear PointC,

many Thanks. At present it goes -500px up and coming down. I want to increase the size of the #image2 so that it will cover the whole area (300x250) and than come to the original size.

 

Link to comment
Share on other sites

Well, you can increase the scale to meet your needs. I only added a quick scale because you said you wanted to increase the size, but your original pen only had a 'y' position animation. The custom ease is working fine now so feel free to adjust and add any animation properties you like.

  • Like 1
Link to comment
Share on other sites

Thanks for your recommendation and prompt reply. I have increase the scale to 4 but it doesnot cover the whole area.

One more thing: How can I hide #text_image and #image2 (opacity 0) after completing the animation. I am asking because I will add one more image.

@Carl no Problem.

Many Thanks for your help. Very thankful for prompt help and appreciating it.

Link to comment
Share on other sites

I can hide the images after completing the image.

 

TweenLite.to("#text_image", 3, {autoAlpha:0, delay:4});

It works. Only Scaling is not working. I have increase it to 4 but it does not cover the whole area.

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