Jump to content
Search Community

import CustomBounce,need help!

Alexygen test
Moderator Tag

Recommended Posts

Hello. I try import CustomBounce in script animate.js

import * as gsap from "./plug/index.js";
import * as CustomEase from "./plug/CustomEase.js";
import { CustomBounce } from "./plug/CustomBounce.js";
 
gsap.registerPlugin(CustomEase, CustomBounce);
const duration = 3;
const updateUI = () => progressSlider.value = tl3.progress()
const updateAnimation = () => tl3.progress(progressSlider.value).pause()
 
const tl3 = new gsap.TimelineLite({delay:0.2, onUpdate: updateUI})
 
CustomBounce.create("myBounce", {strength:0.7, squash:3})
tl3.to("#ball", duration, {y:550, ease:"myBounce"})
.to("#ball", duration, {scaleY:0.5, scaleX:1.3, ease:"myBounce-squash", transformOrigin:"bottom"}, 0)
 
CustomEase.getSVGData("myBounce", {path:"#bounce", width:700, height:500});
CustomEase.getSVGData("myBounce-squash", {path:"#squash", width:700, height:500});
 
progressSlider = document.getElementById("progressSlider")
progressSlider.addEventListener("input", updateAnimation)
 
document.getElementById("play").onclick = () => tl3.progress() == 1 ? tl3.restart() : tl3.play()

 

this script include in html

 
<script src="animate.js" type="module"></script>
</body>
</html>

 

But not working, in browser write error:
Uncaught SyntaxError: The requested module './plug/CustomBounce.js' does not provide an export named 'CustomBounce'

 

Help me please, what I do wrong? 

 

 

Link to comment
Share on other sites

Hey Alexygen and welcome to the GreenSock forums.

 

We highly recommend using the install helper until you get more comfortable importing GSAP correctly. It will show you that you should use the following (once you've installed GSAP via the .tgz file):

import { gsap } from "gsap";
import { CustomEase } from "gsap/CustomEase";
import { CustomBounce } from "gsap/CustomBounce";

gsap.registerPlugin(CustomEase, CustomBounce);

Please see the installation page, especially the video regarding loading GSAP via modules, for more information.

 

Also there's no need for new gsap.TimelineLite. Just use gsap.timeline().

Link to comment
Share on other sites

I read instructions, but if I use code:

 

import { gsap } from "gsap";
import { CustomEase } from "gsap/CustomEase";
import { CustomBounce } from "gsap/CustomBounce";

gsap.registerPlugin(CustomEase, CustomBounce);

 

I get error in browser:
Uncaught SyntaxError: The requested module './plug/CustomBounce.js' does not provide an export named 'CustomBounce'

 

I dont use npm or yarn 

Link to comment
Share on other sites

Why use imports at all then? Make sure you'se using the files from the minified directory and then use script tags:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
<script src="./plug/CustomEase.min.js"></script>
<script src="./plug/CustomBounce.min.js"></script>

<script src="your-custom.js"><script>

 

Link to comment
Share on other sites

If you're going to import directly into the browser, I believe many browsers require that you have the file extension at the end and it must be a path to the file, so assuming you literally have a folder named "gsap" in the same directory as your HTML file, and that "gsap" folder has all the GSAP ESM files it would look like:

import { gsap } from "gsap/gsap.js";
import { CustomEase } from "gsap/CustomEase.js";
import { CustomBounce } from "gsap/CustomBounce.js";

I'm curious why you're doing it this way though. Wouldn't you want the minified files for maximum compatibility and minimum load time? 

 

If you're still having trouble, please post a reduced test case (maybe zip a directory with the files exactly as you have them). 

Link to comment
Share on other sites

There is no gsap file. You should import the index.js file.

//import { gsap } from "./plug/gsap.js";
import { gsap } from "./plug/index.js";

 

Don't use TweenMax or TimelineMax.

//const tl = new gsap.TweenMax();
const tl = gsap.timeline();

 

 

 

  • Like 3
Link to comment
Share on other sites

import { gsap } from "./plug/index.js";
import { CustomEase } from "./plug/CustomEase.js";
import { CustomBounce } from "./plug/CustomBounce.js";
 
gsap.registerPlugin(CustomEase, CustomBounce);

 

But one problem its import CustomEase and CustomBounce

Browser write error: Uncaught SyntaxError: The requested module './plug/CustomBounce.js' does not provide an export named 'CustomBounce'

 

Link to comment
Share on other sites

11 minutes ago, GreenSock said:

Clearly it does - check the source code: 


export class CustomBounce {
  ...

Maybe you're linking to the incorrect file or using a browser that doesn't support classes? 

 

I dont see this code in source code. In zip file I attach all my files, look please

 

I have version plugin 

VERSION: 0.2.1
Link to comment
Share on other sites

7 minutes ago, GreenSock said:

OH! You're using a super old version, probably from back in the GSAP 2 days. We completely rewrote the platform in version 3 (in late 2019) as ES Modules. Please update to the latest version. 

Ok, thank you! I will update!

 

Early I am using this code:

.staggerFromTo(allElem, duration,
{ x: xDistance, autoAlpha: alpha, ease: esing },
{ x: 100, autoAlpha: 0.8, ease: "bounce.out" },
0.4)

 

now how I can use staggerFromTo?

Link to comment
Share on other sites

Technically that should work fine, but in GSAP 3 it's easier. Any tween can have a stagger. 

 

fromTo(allElem, { x: xDistance, autoAlpha: alpha },
{ x: 100, autoAlpha: 0.8, ease: "bounce.out", duration: duration, stagger: 0.4})

Side note: it's pointless to define an ease in the "from" vars of a "fromTo()" since those are instantly applied. 

 

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

11 hours ago, GreenSock said:

Technically that should work fine, but in GSAP 3 it's easier. Any tween can have a stagger. 

 


fromTo(allElem, { x: xDistance, autoAlpha: alpha },
{ x: 100, autoAlpha: 0.8, ease: "bounce.out", duration: duration, stagger: 0.4})

Side note: it's pointless to define an ease in the "from" vars of a "fromTo()" since those are instantly applied. 

 

Does that clear things up? 

 

fromTo and staggerFromTo work differently. If I change staggerFromTo to fromTo, animation does not use the first parameter 

{ x: xDistance, autoAlpha: alpha, ease: esing }

 

and animation is only final

Link to comment
Share on other sites

On 6/21/2020 at 5:08 AM, Alexygen said:

fromTo and staggerFromTo work differently. If I change staggerFromTo to fromTo, animation does not use the first parameter 

{ x: xDistance, autoAlpha: alpha, ease: esing }

 

and animation is only final

That doesn't make sense. fromTo and staggerFromTo do the same exact things internally in GSAP 3. And in neither case should the fromVars be ignored. Can you please create a minimal demo of the issue using CodePen so we can help you get things straight?

 

Link to comment
Share on other sites

59 minutes ago, ZachSaucier said:

That doesn't make sense. fromTo and staggerFromTo do the same exact things internally in GSAP 3. And in neither case should the fromVars be ignored. Can you please create a minimal demo of the issue using CodePen so we can help you get things straight?

 

 

I create project on CodePen: 

See the Pen ExPWJaL by Alexygen (@Alexygen) on CodePen

 

And one more question: 

how to remove the delay between .to and .call? Now the smile shifts to the right and down and after down and jumps, but there is a delay

 

 

 

 

 

Link to comment
Share on other sites

You're loading a really old version of GSAP so the stagger property doesn't exist on .fromTo()s. We highly recommend upgrading to the latest version of GSAP (3.3.4 right now). Here's how I'd set it up (there's no need for a .call()):

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

 

I highly recommend reading reading the GSAP getting started article and position parameter info:

 

  • Like 1
Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

You're loading a really old version of GSAP so the stagger property doesn't exist on .fromTo()s. We highly recommend upgrading to the latest version of GSAP (3.3.4 right now). Here's how I'd set it up (there's no need for a .call()):

 

 

 

I highly recommend reading reading the GSAP getting started article and position parameter info:

 

 

your animation turned out completely different!

 

 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

It wasn't clear what you were trying to do so I did my best guess at what you're attempting. Please modify it to your needs.

 

how to remove the delay between

  .to('#smile', { duration: 0.1, x: 100, y: 150, rotation: 360

and })
  
  .to('#smile', { duration: 0.3, y: 350, ease: "myBounce" }, "+=0.2")

Now the smile shifts to the right and down and after down and jumps, but there is a delay

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Remove the "+=0.2". Again, please look at the resources that I linked to. Understanding what's going on will help you solve your issues and create your animation more quickly :) 

 

I see, but after line:

to('#smile', { duration: 0.1, x: 100, y: 150, rotation: 360

animation stops for a split second and the next one is executed, there is no smoothness.
  Question how to do without transition.

  so that the smile falls down without stopping

Link to comment
Share on other sites

2 minutes ago, Alexygen said:

animation stops for a split second and the next one is executed, there is no smoothness.

There is no delay, it is just perceived delay. To change that, change the ease. Or use layered animations (animate a container of the element that you're wanting to animate) so that you can animate the same property at two different rates. That way you can use a negative offset to have continuous motion.

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