Observer animation text

[Umberto]

Hi,
I wanted to insert an animation text into this slide created with Observer.
I've tried various things but I can't. I also tried with Splitext but nothing, it doesn't work.

 

 

Can you help me?
Thank you

See the Pen MWxaqNW by umberto (@umberto) on CodePen

[GSAP Helper]

Hi there! Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Your demo is completely broken, with JavaScript errors in the console, missing functions, etc. Please make sure you provide the most minimal functional demo possible - your current one has hundreds of lines of code which will significantly reduce your chances of getting a good answer here. The simpler the better. 👍

[Umberto]

Sorry, I'll try to explain myself better.

I tried to insert a text animation every time I change slides.

The problem I would like to solve is:
when I change slides, the text, both incoming and outgoing, does not create the desired effect:

.set(splitPrevious, { autoAlpha: 1, yPercent: 0, xPercent: 0})
.to(splitPrevious, {
duration: 1.2,
autoAlpha: 0,
yPercent: 60,
xPercent: 20
}, 'start')
.set(splitCurrent, { autoAlpha: 1, yPercent: 0, xPercent: 0})
.to(splitCurrent, {
duration: 1.2,
autoAlpha: 0,
yPercent: -60,
xPercent: 20
}, 'start')

 

I hope I explained myself better

 

Thanks for your time

[GSAP Helper]

We can't really help without a clear minimal demo that illustrates the issue. We also don't understand what "the desired effect" means

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Umberto]

Hi, the demo is in my first post, already edited as you asked.

I'm sending it back

 

 

 

https://codepen.io/umberto/pen/MWxaqNW

 

Thanks

[Umberto]

See the Pen MWxaqNW by umberto (@umberto) on CodePen

 

 

 

[Cassie]

Hey there Umberto, sorry no one's jumped in yet. I took a look but it was a little too complicated logic-wise for the time I had available. I've added in a small animation to show you where you would need to add an animation into the timeline.

If it's a bit confusing logic-wise I suggest getting a pen and paper and drawing/writing down the steps involved in changing slides. Sliders can be complicated but writing the steps down is sometimes a help.

 

See the Pen oNVbqqV?editors=0011 by GreenSock (@GreenSock) on CodePen

[Umberto]

Hi Cassie, thank you for the work you did, you eliminated some errors.

 

I tried inserting text, yPercent: -100 and autoAlpha: 1 into the animation.

 

If you click to scroll through the slides, you'll see that the text goes up and that's ok, but when you start over from the first slide, the text stays at yPercent: -100 and doesn't reset to yPercent: 0. Then autoAlpha 1 doesn't work.

 

See the Pen bGZpGzw by umberto (@umberto) on CodePen

/

 

I also tried to insert Splittext but I couldn't

 

Would you be so kind as to help me?

Thank you for your times

[Umberto]

Hi Cassie, I managed to make some changes and it's already starting to work the way I want.

I don't understand why the animation doesn't start when I view the slides the first time, then later, when it starts again from the first slide, everything works fine.

 

See the Pen bGZpGzw by umberto (@umberto) on CodePen

[GreenSock]

Isn't that just because you've set everything up so that the initial state is the full-opacity, etc.? So the reason it works the 2nd time is because the out-animation has properly faded/moved them to their "out" state. 

[Umberto]

Of course, I tried to make various changes and this is the best result I got, but there are many problems both in entering and exiting the slides.

 

See the Pen PoLzqVd by umberto (@umberto) on CodePen

I tried to add Splitext but I can't

[Rodrigo]

Hi,

 

23 minutes ago, Umberto said:

but there are many problems both in entering and exiting the slides.

What problems exactly? I see everything is working according to the code you have in your demo 🤷‍♂️

 

23 minutes ago, Umberto said:

I tried to add Splitext but I can't

Where exactly? I don't see any SplitText code anywhere in your demo.

 

Happy Tweening!

[Umberto]

Sorry, this is the slittext version.

 

See the Pen mdoEjjv by umberto (@umberto) on CodePen

As you can see from the example, the slides are not synchronized with the text. I tried but I can't

Thank you

[Rodrigo]

Hi,

 

I think you still have some logic issues here as Cassie mentioned in Her post. You are animating all the elements inside every slide on every event as you can see in this video:

https://i.imgur.com/iov3kDA.mp4

 

Basically what I'm doing there is going from the blue to the black slide and making the gray one visible and you can see the text of that slide being animated. It seems as well that you're re-creating all the SplitText elements on every event handler (regardless of the direction).

 

My advice would be to simplify this as much as possible and don't re-create the SplitText instances, there is no need to do that unless you change the screen size or pass a specific breakpoint that changes the distribution of the text and need the SplitText instances to reflect that. Also instead of going for a complex class first, just create a single timeline that goes from slide one, to two and finally to three. When you have that timeline working the way you want/need, you'll be able to extrapolate the animation that you should repeat on every event. Sometimes less is more and simpler is better, I think your current approach is overcomplicating things quite a bit.

 

Happy Tweening!