Alexygen

Hi! I have the same problem! Is there a solution? I’m just choosing a framework for animation in the project, if this problem is solved, then I’ll buy a license and start using

Всем привет! Ищем верстальщика в проект. Проект на React, требуется только верстка, логику писать не нужно! Hello! We are looking for a coder for the project. React project, only layout is required, no logic needs to be written!

this my test https://codepen.io/Alexygen/pen/dyGZOOQ I'm trying to make the horizontal scroll endless

how do infinity scroll like here https://codepen.io/GreenSock/pen/rNOebyo ?

thanks!!

don't work (( elements red, orange, purple and gray scrolling at the same time

Hi! Help me please! I don't understand why all elements .panel scrolling at the same time.And I need to block scrolling

Thank you!!!!

Hello. I find example https://codepen.io/osublake/pen/7c4eae8dd686a125d631da761b164f2d How to make the ball flatten when it hits the wall? If I add code: .to( ball, { duration: 3, scaleY: 0.5, scaleX: 1.3, ease: "myBounce-squash", transformOrigin: "bottom", } ) and code import { CustomBounce } from "./plug/CustomBounce.js" import { CustomEase } from "./plug/CustomEase.js" gsap.registerPlugin(Draggable, InertiaPlugin, CustomBounce, CustomEase) CustomBounce.create("myBounce", { strength: 0.7, squash: 3 }) this not work

Thank you very mutch! I figured it out!!!

I understand it. But then ease: "myBounce" fires earlier

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

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

your animation turned out completely different!

I create project on CodePen: https://codepen.io/Alexygen/pen/ExPWJaL 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

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

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?

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

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'

OSUblake, thank you!!!! Its working!!!

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

I have interesting how to use import without npm, and I dont want include CDN

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

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?