Jump to content
GreenSock

gigocabrera

Please help a noob

Recommended Posts

I have the following code and it works like a charm. Every card (card1, card2, etc...) "travels" from position 1000 to original with a .1 speed. 

 

What I'm trying to accomplish is to have every card travel at speed ".1" until it reaches 80% of "y" and then travel at a lower speed for the rest of the "trip". 

 

How can I achieve this?

tl: any;
this.tl = new TimelineMax({delay: 1});
this.tl
      .from(card1, .1, { y: 1000})
      .from(card2, .1, { y: 1000})
      .from(card3, .1, { y: 1000})
      .from(card4, .1, { y: 1000})
      .from(card5, .1, { y: 1000})
      .from(card6, .1, { y: 1000})
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

From what I can tell you probably may just need the right ease. Power3.easeOut is probably pretty close what you describe.

 

I made a CustomEase though that goes pretty fast until 80% and then slows down at a linear rate.

 

Click on this link: https://greensock.com/customease?CustomEase=M0,0%20C0.11,0.494%200.167,0.68%200.3,0.8%200.362,0.856%200.504,0.93%201,1 and scroll down to the Ease Visualizer to see the ease I'm talking about. If you are not familiar with easing, definitely watch all the videos on that page. You can get pretty much any timing effect you want. 

 

Here's a demo that uses the ease that slows down at 80% http://codepen.io/GreenSock/pen/EWJJJz?editors=0010

  • Like 4
Link to comment
Share on other sites

Nice one Carl. :)

 

If you'd have asked me about my favorite GSAP feature or plugin a few months ago, I probably would have said MorphSVG or DrawSVG, but CustomEase has quickly become a big part of my work and one of my favorites. Throw in the Custom Bounce and Wiggle and it's so versatile. Amazing!

 

:)

  • Like 3
Link to comment
Share on other sites

Carl, thank you very much for the example. Exactly what I was looking for!!!

 

However, I'm getting an error when I try to use the CustomEase method. Is this a separate library I need to add to my project?

CustomEase.create
  • Like 1
Link to comment
Share on other sites

Yes, CustomEase is a bonus tool we provide to people like yourself that have GreenSock accounts. 

 
Please watch the video in the "Using Custom Ease" section: https://greensock.com/customease (around time 6:20)

 

CustomEase is included when you are download GSAP while logged in.

Just visit your dashboard to grab the latest GSAP package: https://greensock.com/forums/account-dashboard/

CustomEase is in the easing folder and you will need to load it into your project. CustomEase is not available on the CDN.

  • Like 2
Link to comment
Share on other sites

I'm using GSAP in my ionic 2 app and I got it installed through the npm package. In order to make gsap to work, I added 

import 'gsap';

 to my app.module.ts and again, everything works like a charm.

 

How do I install the Custom Ease?

 

I added the following entry to my index.html page but not sure if I need an Import statement like the one for gsap.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>

By the way, just with the entry in the index.html page it doesn't work

Link to comment
Share on other sites

CustomEase is not in EasePack and its not hosted on any CDN so you will need a script tag that pulls it in from wherever it is hosted on your filesystem / server.

Link to comment
Share on other sites

And to be clear, you get CustomEase from the download zip that's only available to folks with a GreenSock account (free or paid, doesn't matter). Just make sure you're logged in and then either client the "Download GSAP" button on the home page or go to your dashboard and get the file there. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

Ok, getting closer I think

 

I download GSAP and extracted the CustomEase.min.js file, added it to my project and created a script tag referencing the library. I know it is correctly being referenced in my app because I see it in View Page Source

 

My challenge at this point I think is how to use it in a TypeScript project. Ionic2 is based on TypeScript so when I try to add the create method below, TypeScript complains with [ts] Cannot find name 'CustomEase'

CustomEase.create
Link to comment
Share on other sites

Sorry, I have zero experience with TypeScript. or Ionic. Wish I could help more. 

Link to comment
Share on other sites

I got it working - whooohooo

 

You guys are awesome. Thank you very much for all your help!!!

 

I will write a blog post on my site on how to add GSAP and CustomEase to an ionic 2 project based on what I learned from you guys. I'm sure other noobs like me could benefit from it. 

  • Like 1
Link to comment
Share on other sites

Glad to hear you got the help you needed and are excited about passing the info to others. I'd encourage you to make a habit of reading the forums and contributing where you are comfortable, it can be a great learning experience

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