Alexygen Posted June 20, 2020 Share Posted June 20, 2020 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 More sharing options...
ZachSaucier Posted June 20, 2020 Share Posted June 20, 2020 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 More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 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 More sharing options...
ZachSaucier Posted June 20, 2020 Share Posted June 20, 2020 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 More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 I have interesting how to use import without npm, and I dont want include CDN Link to comment Share on other sites More sharing options...
GreenSock Posted June 20, 2020 Share Posted June 20, 2020 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 More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 If I do how you talk I have error in browser: GET http://127.0.0.1:5500/plug/gsap.js net::ERR_ABORTED 404 (Not Found) I have a problem in files svg.js and text.js my.zip Link to comment Share on other sites More sharing options...
OSUblake Posted June 20, 2020 Share Posted June 20, 2020 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(); 3 Link to comment Share on other sites More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 OSUblake, thank you!!!! Its working!!! Link to comment Share on other sites More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 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 More sharing options...
GreenSock Posted June 20, 2020 Share Posted June 20, 2020 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? Link to comment Share on other sites More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 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 More sharing options...
GreenSock Posted June 20, 2020 Share Posted June 20, 2020 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. 1 Link to comment Share on other sites More sharing options...
Alexygen Posted June 20, 2020 Author Share Posted June 20, 2020 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 More sharing options...
GreenSock Posted June 20, 2020 Share Posted June 20, 2020 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? 1 Link to comment Share on other sites More sharing options...
Alexygen Posted June 21, 2020 Author Share Posted June 21, 2020 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 More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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 More sharing options...
Alexygen Posted June 22, 2020 Author Share Posted June 22, 2020 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 More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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: 1 Link to comment Share on other sites More sharing options...
Alexygen Posted June 22, 2020 Author Share Posted June 22, 2020 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 More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 3 minutes ago, Alexygen said: your animation turned out completely different! 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. Link to comment Share on other sites More sharing options...
Alexygen Posted June 22, 2020 Author Share Posted June 22, 2020 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 More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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 Link to comment Share on other sites More sharing options...
Alexygen Posted June 22, 2020 Author Share Posted June 22, 2020 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 More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now