Jump to content
Search Community

Alexygen

Members

  • Posts

    25

  • Joined

  • Last visited

 Content Type 

Posts posted by Alexygen

    React sortable list

    in GSAP

    Posted

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

    ScrollTrigger

    in GSAP

    Posted

    41 minutes ago, ZachSaucier said:

    That approach won't work with your setup because it actually resets the scroll position. Are you just trying to wrap the horizontal sections? How would that work with scrolling to other areas? 

     

    Perhaps this thread is helpful:

     

     

    this my test

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

     

    I'm trying to make the horizontal scroll endless

     

    ScrollTrigger

    in GSAP

    Posted

    12 minutes ago, ZachSaucier said:

    Sorry, forgot to include the display line. It does work.

     

    thanks! how remove diagonal scroll between gray and blue box?

     

    548994135_2020-06-3022_30_02.thumb.png.3dd46e20fa4b58b42a94f5ab7b610462.png

     

     

    ScrollTrigger

    in GSAP

    Posted

    6 minutes ago, ZachSaucier said:

    Hey Alexygen. You just have to make sure that the horizontal panels don't wrap. One way to do it: 

    
#container {
  white-space: nowrap;
  font-size: 0;
}
.panel {
  font-size: 1rem;
}

     

     

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

    Ball example

    in GSAP

    Posted

    Hello.

    I find example  

    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

    See the Pen 7c4eae8dd686a125d631da761b164f2d by osublake (@osublake) on CodePen

    import CustomBounce,need help!

    in GSAP

    Posted

    1 minute ago, ZachSaucier said:

    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.

     

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

    import CustomBounce,need help!

    in GSAP

    Posted

    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

    import CustomBounce,need help!

    in GSAP

    Posted

    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

    import CustomBounce,need help!

    in GSAP

    Posted

    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!

     

     

    import CustomBounce,need help!

    in GSAP

    Posted

    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

     

     

     

     

     

    import CustomBounce,need help!

    in GSAP

    Posted

    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

    import CustomBounce,need help!

    in GSAP

    Posted

    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?

    import CustomBounce,need help!

    in GSAP

    Posted

    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

    import CustomBounce,need help!

    in GSAP

    Posted

    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'

     

    import CustomBounce,need help!

    in GSAP

    Posted

    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 

    import CustomBounce,need help!

    in GSAP

    Posted

    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? 

     

     

×
×
  • Create New...