sadeghbarati

so many issues like mine but older version of gsap without solution :"(
@ZachSaucier
 

 

 

 

 

@ZachSaucier

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 ?

this.menuTimeLine = gsap.timeline({
  paused: true,
});

this.menuTimeLine
.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()) {
  this.menuTimeLine.play()
} else {
  this.menuTimeLine.reverse()
}

Button.addEventListener('click', () => {

  if (this.menuTimeLine.reversed()) {
    this.menuTimeLine.play();
  } else {
    this.menuTimeLine.reverse()
  }

})

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

here's updated codepen example
sometime repeat works sometime stops at end

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

@ZachSaucier

@GreenSock

@OSUblake

@mikel

 

 

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 😭😭😢

No

Thanks @ZachSaucier and @GreenSock

only wrapping loops I have to practices with modifiers If I have question I will came back xD

@GreenSock

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

Math code commented down below of js panel
looks like Math helpers some of them can't work with negative values so returns NaN

it's not Gsap error I just want to get best value from getVelocity with best helper you suggesting 
 

Yay! thanks

I need more Practices xD

Take a look at this example

Progress bar indicator while scrolling

at end of scrolling progress bar hides

I want to use ScrollTrigger width on scroll and hide it slightly at the end ?

how to set delay on property in ScrollTrigger ?

or we have to use two scrollTrigger one for width one for hide ?

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

also some Math helpers Returns NaN 🥱

@ZachSaucier
Thanks for help getVelocity parameter helps me but
How to get best velocity size coz it's generate big number while scrolling and timeScale is gets really faster

getVelocity / 100 ?
Math helpers?

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

Many repetitive topics I see in Gsap fourm is how to get best wrapping loops and that my question too

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

hope this Topic help others like me 

only thing It came to my mind:

pasue a timeline while scrolling ?
and then play it while no scrolling ?

How to create this animation like Cuberto Idea

Without jumpy at end of repeat and while ScrollTriggering or Scrub
and how to get scrollDirection with ScrollTrigger API

Cuberto use idiotWu scrollbar plugin for scroll direction
 

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

sry i dont see that link that solve my problem thanks

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 :'(