[Learn DrawSVG]

4 minutes ago, Rodrigo said:

You can always use this starter template to use all the bonus plugins for free on codepen:

Ah! Understood, thank you!

 

6 minutes ago, Rodrigo said:

Also in this case it'd be better to not use filled or closed paths, but just single lines, like this:

Yeah, it still turns out I need to draw every line. Okay, while I have time, I'll practice svg drawing.😅

Thanks!

[Learn DrawSVG]

While I have a break between projects, I wanted to figure out how to work DrawSVG.
I took a ready-made animation of the logo and based on it to implement animation only using gsap.
But I ran into two problems...
1) When I try to take the DrawSVGPlugin connection from the examples... CodePen requires Upgrade to Pro
2) I found a suitable example... but there is also an upgrade required to see the work of the example...

What to do? Is there any way to connect js in another way?

 

An example that seems to suit me, I found here

See the Pen 85df19ba523672229f92e5aa4ac675af by cassie-codes (@cassie-codes) on CodePen

 

I also attach an example of animation

 

And here is my attempt to make my own project

See the Pen pogorPV by eglit_m (@eglit_m) on CodePen

[quickSetter pin or trigger?]

	document.querySelectorAll(".black-block").forEach((item) => {
	  item.addEventListener("mouseenter", function () {
	    gsap.to(".ball", {
		toggleClass: '.class-ball',
		backgroundColor: '#ffffff'
	    });
	  });
	  item.addEventListener("mouseleave", function () {
	    gsap.to(".ball", {
		backgroundColor: '#DE002B'
	    });
	  });
	});

For some reason, toggleClass is not added

[quickSetter pin or trigger?]

1 hour ago, mvaneijgen said:

For the animation it self you can of course do what ever you want (for the filling of other elements I would look in to the Flip plugin). But you can just add event listeners to the elements you want things to happen and do your animation when that happens. Hope it helps and happy tweening!

And how to turn to the mix-blend-mode style? For example, there is a backgroundColor for the background.
Or is it easier to add a class when the cursor hits the black-block block?

[quickSetter pin or trigger?]

1 hour ago, mvaneijgen said:

For the animation it self you can of course do what ever you want (for the filling of other elements I would look in to the Flip plugin). But you can just add event listeners to the elements you want things to happen and do your animation when that happens. Hope it helps and happy tweening!

I didn't think it was possible to use add event listeners in this way!

Thank you very much ^___^

[quickSetter pin or trigger?]

Good afternoon.

Please tell me, is there a function that will allow you to change styles or add a class to the ball block that follows the cursor.

For example, if the cursor hit a block with the btn class, dissolve the cursor by the size of the button block, or when hovering over blocks with the info-img and black-block class, the color changed (or added its own class to the ball).

See the Pen QWzmRgr by eglit_m (@eglit_m) on CodePen

[Position sticky using gsap]

37 minutes ago, mvaneijgen said:

Try calling ScrollTrigger.refresh(); when you've opened or closed the the blocks. Doing this will recalculate the positions. 
 

Oooo 🤩... It works, but only when closing all the blocks except the initial one, for some reason I did not recalculate.😅

[Position sticky using gsap]

As I understand it, the end does not count further, it turns out ...
You can make the end up to btn-count-rates

[Position sticky using gsap]

I corrected the layout and added a version of the code, but it turned out that the scrolling of the block does not go to the end.
It turns out that not all the blocks are open at once, they open one by one, and when I scroll and open blocks 2-3, the opening of the block slows down and does not scroll further...

[Position sticky using gsap]

1 hour ago, mvaneijgen said:

I came to the same conclusion, what was trowing me off is that a lot of divs don't have a proper closing tag. Hope it helps and happy tweening! 

 

I'm sorry, it can be seen when I moved and removed a lot of text, I accidentally deleted the closing tag >__<, and then also duplicated with this error T___T

[Position sticky using gsap]

Good afternoon!
I wanted to make the block with the table-rates-head class in the "table" scroll within the parent with the table-rates-options class.
But I managed to make the scroll work on the machine, I can't figure out how to make a trigger for the block with scrolling down and up, and not how it turned out on the machine scrolls to the end.

It turns out that I need to make position sticky using gsap, I can't do it purely with styles, due to the fact that there must be overflow hidden...

See the Pen NWewrad by eglit_m (@eglit_m) on CodePen

[Marquee text]

1 hour ago, Rodrigo said:

Hi,

 

Just remove the repeat: -1 from the config and set a different value for the end position of the text. Maybe something like this:

const tl = gsap.timeline();
tl.to("#masterTextPath", {
  duration: dur,
  attr: { startOffset: "32%" },
  ease: "power2.out"
});

Hopefully this helps.

Happy Tweening!

 

 

aaa... that's the thing.

There is no way to do without movement at all?

[Marquee text]

2 hours ago, GreenSock said:

I assume you meant animation.pause()? (there is no stop() method)

 

If you still need help, please make sure you provide a minimal demo like a CodePen that clearly illustrates the issue. 

The first message is essentially my CodePen, but I can refer to it again 🥰

 

In general, they asked to leave the text on the curve (Master Line), but so that it does not move...

 

[Marquee text]

On 3/22/2023 at 12:38 PM, Cassie said:

Oh ok I got you!

 

yoyo:true is the property that's making it go backwards and forwards (like a yoyo)

If you remove that and adjust the initial offset position it may be closer to what you're after?
 

 

 

 

Good afternoon!

And tell me how to stop the animation and make the text just be on the Master Line?

I add this piece of code, but the text keeps moving

 

		onComplete: (w) => {
			animation.stop();
		}

 

[Leaflet map for GSAP]

On 4/10/2023 at 1:04 PM, Cassie said:

Hi there, yes it's possible - But it looks like leaflet is a library designed specifically for interactive maps. GSAP isn't, it's an animation library.

With GSAP you would have to create everything yourself from scratch.

GSAP also only handles animation, not rendering, so it would be up to you to create the map somehow, whether that's HTML elements, SVG, canvas etc.

Hope this helps!

 

Thanks for the answer I will deal with js Leaflet then

[Leaflet map for GSAP]

On 4/6/2023 at 4:53 PM, Rodrigo said:

Hi,

 

Do you have a question for us on this subject? If so please remember to create a minimal demo showing what you got at this point so we can take a better look.

 

Happy Tweening!

I need an answer, is it possible to make the same map with areas and information when hovering over an area, as is done with js Leaflet, as here for example

 

See the Pen WNrmdQE by jenishhrestha (@jenishhrestha) on CodePen

 

See the Pen rYeeMw by travishorn (@travishorn) on CodePen

 

See the Pen RwovJRN by anitaparmar26 (@anitaparmar26) on CodePen

 

 

 

 

[Leaflet map for GSAP]

Good afternoon!

There is such a script Leaflet.js, it implements maps.

Question, I essentially need a map of the house, with the separation of areas where and what is located.

Is it possible to implement the same map, but only with the help of gsap, where the selected area, when selected, information about the object appears, and when clicked, some action occurs (transition or popup opening).

I found such a post, but there is a choice not by area, but by clicking on a third-party object.

 

 

 

[Marquee text]

52 minutes ago, Cassie said:

If you remove that and adjust the initial offset position it may be closer to what you're after?

Yes, thank you!🥰

 

It also turns out that it was necessary to configure startOffset in textPath. By the way, I haven't really figured out startOffset yet >_<

When I was cleaning yoyo, he behaved strangely at me...😑

[Help with animation error and js connection]

1 hour ago, akapowl said:

It only appears to be centered in the end - it was not my intention to make it become centered - and I already gave you an explanation for the movement on the horizontal axis earlier.

 

Oh, right! I guess I was obviously stuck on one question then, I completely forgot about the replacement >__<

 

[Help with animation error and js connection]

17 hours ago, akapowl said:

Also, JS is only one third of what makes the page; and it doesn't look like you changed what I mentioned earlier about putting your canvas inside of your section and positioning it absolute instead of fixed, in your codepen either - don't forget about that.

 

 

The question is, why does the picture become centered at the end of the animation?

 

The jar in my pictures goes from right to left, but for some reason it becomes centered, although my last frame clearly positions the picture on the right. Is there a setting responsible for the position?

[Marquee text]

14 hours ago, Cassie said:

What do you mean by circle SVG master-line?

 

Do you know there is such a thing as a running ad line?

They usually go in a circle, in the plan they repeat from one end of the line to the other.

That's the question, how to loop a string by svg master-line? I managed to do it along the line, but it reaches the end and comes back from the place where it ended.

 

13 hours ago, Rodrigo said:

All credits to @nico fonseca who created this amazing example:

No, I meant this in a circle, but clockwise only

See the Pen zXKYvw by kryvonos_v (@kryvonos_v) on CodePen

 

[Marquee text]

I wanted to make a marquee text using svg master-line, but I only managed to make it go in one direction.

Question, is it possible to make it in a circle svg master-line?

See the Pen QWVMopv by eglit_m (@eglit_m) on CodePen

[Help with animation error and js connection]

41 minutes ago, akapowl said:

And then again, in your last codepen there are now only 58 images - that's why at the end there won't be an image visible, because your calculation doesn't match up with the length of the array.

Everything is fine with the pictures I immediately believed it.

 

But I forgot to change from fixed to absolute..

It seems that the trigger has earned ^____ ^

Thank you very much 🥰

[Help with animation error and js connection]

 

Mm... I thought maybe I missed something and inserted your js from CodePen to myself, with your pictures. Why are there no pictures, it seems to be the same..

See the Pen QWVMopv by eglit_m (@eglit_m) on CodePen

[Help with animation error and js connection]

37 minutes ago, akapowl said:

And if you want it to stay in place within a certain threshhold of scrolling, you could pin it via ScrollTrigger ( you can read all about pin in the ScrollTrigger docs ).

Yes, I meant within a certain threshold of scrolling, you said correctly.

I inserted all the parameters, but your picture does not disappear on the last frame, and for some reason it disappears for me.

 

By the way, unfortunately, the site uses jquery version 2.1.3 and you can't install another one >_<