Jump to content
Search Community

Please help a noob

gigocabrera test
Moderator Tag

Go to solution Solved by gigocabrera,

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

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

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

  • Solution

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

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