[ScrollTrigger: Make scroll only start tweens and not control their progress]

Hi

at the moment the scroll controls the progress of each tweens of the timeline.

Instead, after the section is pinned, I'd want that each scroll will starts each tweens.

Practically: section is pinned; I scroll -> start first tween (with its progress independent from the scroll); scroll again -> start 2nd tween (with its progress independent from the scroll); and so on. How can do it?

thanks

 

See the Pen OJqdEgW by gooogooo (@gooogooo) on CodePen

[Creating a progress bar...]

Thanks @mvaneijgen

I thought the Rodrigo code worked on that point, maybe something is changed from 9 years ago, my fault.

 

I'm not understanding why the progress method doesn't update the progress bar timeline, where am I wrong?

See the Pen qBvMMza by gooogooo (@gooogooo) on CodePen

 

 

[Creating a progress bar...]

10 hours ago, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

 

Here it is

 

The error I said is on the Codepen too:

 

 

Orignal topic 

 

Quote

Hi, I'm trying the quoted code.

function progressBarUpdate(tween) {
  console.log(tween.progress())
}

const tl = gsap.timeline({
  delay: 1,
  onUpdate: progressBarUpdate,
});
tl
  .add(animate())
  .add(reveal(), 'reveal')
  .add(start())

 

The timeline itself works perfectly. I just added onUpdate: progressBarUpdate and the function, and I get this error:

  Quote

Uncaught TypeError: Cannot read properties of undefined (reading 'progress')
    at Timeline.progressBarUpdate [as _onUpdate]

The problem comes from this line console.log(tween.progress())

 

Any idea?

 

See the Pen dyrqqPy?editors=1111 by gooogooo (@gooogooo) on CodePen

[Creating a progress bar...]

On 5/26/2013 at 2:46 AM, Rodrigo said:

Hi,

 

A third way could be a modification of Carl's second proposal.

 

Create a TweenMax.from instance that's paused as a variable and set the progress of that instance with the timeline progress. Like this:

var unleash_tl = new TimelineMax({onUpdate:progressBar, onUpdateParams:["{self}"]}),
    progressBar = TweenMax.from(redProgress, 1, {scaleX:0, paused:true});

/*
unleash_tl....
*/

function progressBar(tween)
{
    progressBar.progress(tween.progress());
}

You can see it working here:

 

 

 

Hope this helps,

Cheers,

Rodrigo.

 

Hi, I'm trying the quoted code.

function progressBarUpdate(tween) {
  console.log(tween.progress())
}

const tl = gsap.timeline({
  delay: 1,
  onUpdate: progressBarUpdate,
});
tl
  .add(animate())
  .add(reveal(), 'reveal')
  .add(start())

 

The timeline itself works perfectly. I just added onUpdate: progressBarUpdate and the function, and I get this error:

Quote

Uncaught TypeError: Cannot read properties of undefined (reading 'progress')
    at Timeline.progressBarUpdate [as _onUpdate]

The problem comes from this line console.log(tween.progress())

 

Any idea?

[How to chain timelines with masterTl.add(tl1).add(tl2)...]

On 4/8/2022 at 12:17 PM, Carl said:

Hi and welcome to the GreenSock forums,

 

Without seeing all your code, my guess is that the functions like getMy10sAnimation1() are not returning the animations as shown in the demo below. Your functions are probably just creating the animations as soon as being called. You could log masterTl.duration() for further investigation.

 

 

 

 

 

 

If you need more help please provide a minimal demo 

 

 

 

Hi I'm using GSAP with BarbaJS 2. I have this code

function blue() {
  let tl = gsap.timeline()
  .to(".blue", {scale:2})
  return tl
}

function pink() {
  let tl = gsap.timeline()
  .to(".pink", {rotation:360})
  return tl
}

const master = gsap.timeline()
master
  .call(blue, [])
  .call(pink, [])

I'm trying to use call function in place of add but the 2 timelines start at the same time, not chaining.

What could be the problem here? I read to use call when we need to pass arguments, is it true? Or we simply could use.add(blue(args)) ?

[Correct Syntax to remove multiple classes]

56 minutes ago, GreenSock said:

I suggest you read this answer: 

 

It's much, much better to just animate the individual properties rather than an entire class like that. Better performance and readability. You can remove a class with JavaScript, like element.classList.remove("class-2")

But I don't want in any way GSAP to animate the properties of the class I add! I just want to add a class for other reasons not related to the GSAP animation

[Correct Syntax to remove multiple classes]

This doesn't work anymore in GSAP v3

TweenLite.to(".green", 2, {className:"-=open"})

What's the alternative?

 

I need to do this:

gsap.timeline()
.to(document.documentElement, 0, {className:"-=class-1"})
.to(el2, {
  translateY: '0',
  duration: 1.2,
})
.to(document.documentElement, 0, {className:"-=class-2"})

 

[Infinite marquee animation]

Thanks for the advice.
However, I must point out that this solution also gives the previous error: for very wide viewports the image does not enter from the side but appears after a while. Right now I am trying with Google Chrome on a 4500px viewport. I hope this will help you.

See the Pen BaGMOEy by Federico-Manfredi (@Federico-Manfredi) on CodePen

[Show word after word without transition]

@mvaneijgen thanks for your improvement! I'm having hard times adding a separate animation at the end of one cycle. Check my previous post. Have you a suggestion?

[Infinite marquee animation]

Hi,
I've created an infinite marquee of images, it seems to work pretty well, but for large screen (for example I'm trying on screen greater than 4000px) the image that enter the screen doesn't appear in the same moment that enter the screen but after a little bit. I don't get where I'm wrong, any helps?

See the Pen ZEmmQKv by Federico-Manfredi (@Federico-Manfredi) on CodePen

[Show word after word without transition]

Yeah! It helped a lot.

What means the last gapTime

.set(boomWords.words, {
  autoAlpha: 0,
  stagger: gapTime
}, gapTime); // <====THIS

What if I had to add another animation after? Like this

 

// Previous code, then:
tl.set('.last-boom-word', {
  autoAlpha: 1,
  scale: 1.2,
  repeat: 3,
})

It doesn't start. Here too I don't want any transition (if I use .to in place of .set it works)

[Show word after word without transition]

Here my code:

 

 

I need to hide a word at the end of its tween. I have to show one word per time. Word 1 appears and stays for 1s, then it disappears and Word 2 appears and stays for 1s, and so on. Without any transition between them. Is there a way? Maybe my approach is wrong? Thanks

See the Pen poQxqxL by gooogooo (@gooogooo) on CodePen

[SplitText cuts off characters on Safari]

@mikel thanks, I understand but applying a letter-spacing I get too much space between the chars. I can't use this solution. Any other ideas?

[SplitText cuts off characters on Safari]

Hi,

check the below Codepen on Safari (desktop and mobile) and look at the "f" characters: you'll see that they're cut off until the animation ends (I just took the SplitText demo to make it more clear) causing a bad jump making it buggy. 

 

Is this maybe a Gsap bug? Any way to solve it?

Thanks

 

See the Pen VwrgMJR by gooogooo (@gooogooo) on CodePen

[Chaining functions in GSAP 3.0]

Hi @Cassie

I wanted to keep this question as simple as possibile. animateTitle function was just an example, it contains just a very simple gsap.from() tween like a fade in. It is a function that I have to use also in other contexts, like calling it outside a timeline.

 

export const animateTitle = (element) => {
  gsap.from(element, {...}); // Fade in animation on the passed element
}

 

[Chaining functions in GSAP 3.0]

Hi friends, is there a way to chain functions in the timeline, like this?
 

gsap.timeline()
.add( animateTitle('.hero--about h1') )
.add( animateImage('.hero--about img'), '<5' )

The above code is not working for two reasons: 1) the 2nd function start at the same time as the 1st one; 2) position '<5' doesn't work.

Is there maybe another GSAP function for this? Thanks

[Loop draggable carousel]

On 8/17/2016 at 12:42 PM, OSUblake said:

 

Remember how I said normalization is key to figuring out most animation problems? Just record a couple of start values and you're good to go. Note that you should not clamp the value because that will prevent it from looping.

 

 

 

Hi @OSUblake

thanks for this awesome codepen. I noticed that it's bugged on Firefox, I attach a video showing that.

Is it a bug of Draggable plugin?

Thanks

 

[Infinite marquee animation on image gallery]

Hi

I'm trying to create an infinite marquee animation on images, similar to the one you could see on this site

It seems that ModifiersPlugin is the way. You can see here my code:

but it doesn't work as expected and I don't get where I'm wrong, any helps?

See the Pen wvPBEaz by gooogooo (@gooogooo) on CodePen

[Animated waveform]

11 hours ago, Cassie said:

Heya!

 

Maybe this pen by @OSUblake will help set you in a good direction?
 

 

If you set up a rough codepen with the bars (maybe SVG) we can take a look at it - it could possibly be achieved with some staggering and the right ease? Maybe someone more maths-y can jump in though.

 

 

 

Hi @Cassie

Thanks for the help. I already saw that codepen but the animation I have to do is completely different. I have these bars (that are separated elements) that should animate changing their height randomly but keeping the oval shapes. My thought brought me to see this animation as animating separately those bars but I really don't know if it makes sense! Any idea?

Here is a codepen with the SVG so you can see what I mean:

 

See the Pen ZEXKKGX by gooogooo (@gooogooo) on CodePen

 

Thanks

[Animated waveform]

Hi friends

I need your help. I need to create an animated waveform, this one:  

 

 

There's some flexibility so the 3 shape can be symmetric respect the axis X (like the 3 red oval I draw on it).

The little bars that make up the shapes have the height animated randomly but not too much so we can recognize the oval shapes.

(In a step 2: we need to do an animated transition the reduce the amplitude of the shapes).

 

I know I should post a minimal codepen but I really have some hard time to get what's the way to do it.

Please, someone that give me an idea?

Thanks

 

 

[Animating children directly or parent container element.]

Hi, just a variation on this question. Say I've this code and I need to animate the title "Title"

 

<section>
  <header>
    <div class="container">
      <h1>Title</h1>
    </div>
  </header>
  <div class="container">
    Content...
  </div>
</section>

Is it more efficient apply the animation on <header> tag or <h1> tag?

Consider that the element could be much more nested than that.

[GSAP target not found warning on console]

@Stefano Monteiro Yes, that was clear. I'd like to know if there's a way to avoid to specify each classes.

[GSAP target not found warning on console]

Hi @OSUblake

I've a code like this:

  gsap.utils.toArray("" +
    ".js-class-1, .js-class-1-wrap > *," +
    ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors
    .forEach(el => {
    gsap.from(el, {
      scrollTrigger: {
        trigger: el,
        once: true,
      },
      y: animUpY,
      autoAlpha: 0,
    });
  });

and I obviously get in console a lot of "not found" warnings because some classes are on a page, some others on other pages, and so on.

 

What is the best practice in gsap to check them with an if?

This technique could decrease performance? (and for this reason is better shutdown warnings in gsap.config?)

Also, any advice about a better refactoring of my code is welcome

 

Thanks

 

[BatchTrigger and Ajax]

@OSUblake You're the one, that's it! 🤙 Well, that was tricky.

Below the whole code so that could be helpful for someone.

 

axios.post(ajaxurl, form_data)
  .then(function (response) {

  // This keeps the *same* html to inject and animate
  let template = document.createElement("template");
  template.innerHTML = response.data.html;
  let cards = template.content.querySelectorAll(".card"); // Get elements to animate

  // Inject HTML in the DOM
  // Note: DON'T use insertAdjacentHTML to inject, it duplicates html
  containerEl.append(template.content);

  // ScrollTrigger animation
  ScrollTrigger.batch(cards, {
    onEnter: elements => {
      gsap.from(elements, {
        autoAlpha: 0,
        y: 60,
        stagger: 0.15
      });
    },
    once: true,
  });

})

 

[BatchTrigger and Ajax]

10 minutes ago, wpsoul said:

I can't tell exactly, but 

 

let newItems = htmlDoc.querySelectorAll(".card");

querySelectorAll is not live query. You should try getElementsByClassName if you have any kind of ajax or dynamic dom changes on page

Tried but it's the same