Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by sadeghbarati

  1. My goal is clear dont attention to codepen example

    can we update gsap props with condition ? if else statement ?

    for example if want to have diff duration or ease or any gsap props or Reverse or any condition
    what should I do ?

  2. this.menuTimeLine = gsap.timeline({
      paused: true,
    .fromTo(this.ref.menu, {
      x: "-100%",
    }, {
      x: "0%",
      duration: this.state.open ? 0.3 : 2,
      ease: this.state.open ? "linear" : "expo.out",
    }, 0).reverse()
    if (this.menuTimeLine.reversed()) {
    } else {
    Button.addEventListener('click', () => {
      if (this.menuTimeLine.reversed()) {
      } else {

    Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline 
    In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x

    or Gsap vars can help in this issue ?

    in Codepen example dynamic ease or duration ?

    besause timeline is outside of onClick ?

    See the Pen YzWjjZq by riccardo051 (@riccardo051) on CodePen

  3. @ZachSaucier






    Hi again


    how to update Modifier value with Scroll Direction ( not separate rightToLeft leftToRight wrap function )


    coz its wrap just in one direction ( scrollTrigger direction ) if you change direction ( negative timeScale )  it stop at end of tween 


    not keeping the loop continue 



    another question how to use wrap without Absolute positioning

    coz we may have different text and different width size in Scrolling container ?



    can you guys do a favor and make a best solution for us its really hurts when you can't find solution 😭😭😢

  4. 2 minutes ago, ZachSaucier said:

    Hey sadeghbarati007.  To create this effect you need to have a couple of key things:

    1. An animation that animates the text and wraps/loops perfectly.
    2. Something to track the scroll velocity (ScrollTrigger has a handy method for that) and tween the timeScale of the animation from 1) to speed it up and keep it going in the direction of the scroll.

    That should be enough to get you started :) 

    Thanks for quick response I'll check this out

  5. Hello I have question about how to use gsap in React and Specially in Gatsby

    I have installed gsap new version with npm install ./gsap-bonus.tgz

    In my gatsby-browser.js I define all plugins Globaly so use all those features without import them in another files
    only gsap.to() works

    here is my gatsby-browser.js:

     * Implement Gatsby's Browser APIs in this file.
     * See: https://www.gatsbyjs.org/docs/browser-apis/
    // You can delete this file if you're not using it
    import gsap from "gsap"
    import ScrollTrigger from "gsap/ScrollTrigger";
    import CSSRulePlugin from "gsap/CSSRulePlugin";
    import CSSPlugin from "gsap/CSSPlugin"
    gsap.registerPlugin(ScrollTrigger, CSSPlugin, CSSRulePlugin); 

    Pls help or update GreenSock React Tutorial  and GreenSock NpmUsage :'(