[Question | Hover / Move Animation For SVG]

On 9/26/2023 at 1:31 AM, Rodrigo said:

Hi,

 

I'm having a bit of trouble understanding the concept here. You mean something like confetti:

https://confetti.js.org/

 

Also IDK how doable this could be. Granted I have exactly ZERO experience with banners, but I think it would be difficult to control something that happens in the browser window from the iframe that loads the banner and, again zero experience with that as well, IDK how feasible is to put something globally (like fixed position) from an iframe. My doubt stems from a security stand point, as a site owner if I agree to put add banners to it, I wouldn't be a happy camper if the code in those banners could access my HTML and possibly make changes to it or run global scripts.

 

I'm just babbling regarding my line of expertise here so I could be wrong about the way I'm interpreting your question.

 

Happy Tweening!

Hi Rodrigo,

Thank for your reply.

Yes you right, i must add the image for clear.
Like in the attached SVG.
As you move the mouse, imagine the area near the mouse moving.
It's very difficult to find an example, I couldn't find it again. I just found SS.

I thought maybe there was a script that imported SVG and made such an animation. I mean, I hope.

[Question | Hover / Move Animation For SVG]

Hello im looking for a script,
Imagine a banner with SVG lines, and as you move the mouse, animations occur either in that area or everywhere. Is there a script for this, or does anyone know the concept? I've searched but couldn't find it.

[Scroll Trigger Max Height Problem]

I knew I had missed something.
Thank you very much.

[Scroll Trigger Max Height Problem]

Hi all,

 

I've done a similar build before and it worked.
But it's not working now.
There are max-height:400px and overflox-y in the "content-box" text area.
I'm trying to log console.log as articles like "AWS, Azure, Google Cloud" are triggered. Trigger does not work when scrolling in max-height area.
It wants me to scroll in the body.

I want to run it in scroll in max-height field, where do you think the error is?

See the Pen dyQLLGO?editors=1111 by sawacrow (@sawacrow) on CodePen

[Falling Shapes - What is Concept Name ?]

19 hours ago, geedix said:

 

I don't know, you could just call the concept "falling cubes". 

You could get close with some randomized gsap tweens using a "bounce.out" ease.

I would also look into the gsap Physics2d plugin: https://greensock.com/docs/v3/Plugins/Physics2DPlugin  You would have to figure out your own collision detection, though. There are other libraries for that, but I haven't tried them. https://brm.io/matter-js/ looks fun. Good luck!

 

 

 

6 hours ago, Rodrigo said:

Hi,

 

The Physics2D Plugin won't account for collision detection and bounds. It can help you simulate gravity and friction in your animations though.

 

This example by @OSUblake can help you at least to figure the bounds and bounce effect:

 

 

 

Happy Tweening!

 

@Rodrigo, @geedix

these are great answers. Thanks a lot !
I love this community more and more every day.

[Falling Shapes - What is Concept Name ?]

 

Hi,

I'm trying to do something similar in concept to the video.

10-15 different SVG shapes will bounce low down the Header. But since I don't know the concept name of it, I can't do research and look at examples. I couldn't find any results in Codepen. (2d)

it should be random/overlapping like tetris if possible. (i.e. it shouldn't go through)

 

Does anyone know what the name of this concept is?

 

 

[ScrollSpy Issue]

5 hours ago, Rodrigo said:

Hi,

 

Just out of curiosity, you posted this thread in the banners forums. Is this related to banner ads or just regular website/apps animations?

 

Happy Tweening!

Hi.
its about website actually. can be wrong category

[ScrollSpy Issue]

10 hours ago, Rodrigo said:

Hi,

 

This is the perfect job for the Flip Plugin

https://greensock.com/docs/v3/Plugins/Flip

 

Here is a super simple example:

 

 

 

Hopefully this helps.

Happy Tweening!

 

Yeah thats it ! I was rediscovering America.  Thank you @Rodrigo

 

[ScrollSpy Issue]

Hey all, 

I am trying to scroll spy like in video. I tried many methods but couldn't solve some problems. Can you show the method please ?

(

different colors and x coordinates were used as markers.

)

 

 

 

 

 

See the Pen BaGjzYN by sawacrow (@sawacrow) on CodePen

[What is the name of this concept ?]

@Rodrigothank you !

 

[What is the name of this concept ?]

Hey all,
What is the name of this concept and i couldn't find gsap examples 

example 1: 
example 2: 

See the Pen pEBMML by PixelPink (@PixelPink) on CodePen

I guess its "floating animation" but I cant find gsap examples.

See the Pen oNLVxex by mbagolor (@mbagolor) on CodePen

[Vertical Text Slider First Load Problem (Question)]

1 hour ago, akapowl said:

Hello  @sawacrow

 

You have a bunch of .fromTo() tweens on that timeline, targetting the same properties of the same element, so you might want to have a look at immediateRender.

 

I set it to false as a default for every tween of your timeline, and it looks way better that way.

 

Alternatively, what you could also do, is to set the timeline to paused initially, and then after you have created it set its progress to 1, then back to 0 and then play it, but that is more of a warkaround, and I would suggest getting familiar with the immediateRender property instead, as it wil come in very handy in lots of scenarios like this.

 

Hope that will clear things up a bit. Happy tweening.

 

 

 

 

 

 

Edit:

I only just now saw, you edited your post with another question.

 

With regard to that second question, @Carl's tutorial on staggered staggers and especially the 'follow up' on seemles looping might be of interest for you.

 

For a more in depth dive into GSAP basics, tips and tricks, consider checking out his full courses - he's a great teacher and those are invaluable ressources.

 

https://www.creativecodingclub.com/bundles/creative-coding-club

 

 

 

https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/

 

 

 

 

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

 

 

hi @akapowl

Learning never ends.
It seems like a level advanced issue but it was solved with your support. Thank you hero. 

I will search for new subjects.

See the Pen xxaNNBB by sawacrow (@sawacrow) on CodePen

[Vertical Text Slider First Load Problem (Question)]

Hello,

 i want to do loop-vertical text slider.

i did it but I have error on first screen. 

The numbers seem to be nested, and after the first boot, it gets better.
//GSDevTools.create();
When I run the command, the problem is solved but I cannot detect the error.
They should come with opacity:0 on first boot because CSS is defined.

( The problem is fixed in the 2nd round. )

 

(

by the way, I like the codepen script below, but it was written in gsap 2.0. I couldn't upgrade to 3.0 so I rewrote it.
https://codepen.io/sawacrow/details/ZEMNZWY

)

 

Question 2:

when the animation on the first line is loop, so that it starts as the last animation starts, i.e.
The "<" operator does not work because there is no element before it.
how can i solve this?

 

 

tl2.fromTo(".anim-text h1", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<");
tl2.fromTo(".anim-text h1", {opacity: 1}, {opacity: 1, duration: 1, ease: ease});
tl2.fromTo(".anim-text h1", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});
tl2.fromTo(".anim-text h2", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<");
tl2.fromTo(".anim-text h2", {opacity: 1}, {opacity: 1, duration: 1, ease: ease});
tl2.fromTo(".anim-text h2", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});
tl2.fromTo(".anim-text h3", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<");
tl2.fromTo(".anim-text h3", {opacity: 1}, {opacity: 1, duration: 1, ease: ease});
tl2.fromTo(".anim-text h3", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});

 

See the Pen YzObbpg by sawacrow (@sawacrow) on CodePen

[SawaMotion Library - Based by Gsap.js (showcase-not question)]

Hi all,
I wrote a library that makes the most used animations simple by integrating them with the scrolltrigger.
You can visit the links below to review.

 

Demo: https://cengizilhan.com/sawaMotion/index.html

https://github.com/sawacrow/SawaMotion

 

 

[Video Scroll Animation V2 (Showcase)]

2 minutes ago, GSAP Helper said:

Hi there!

 

Did you have a question for us? 

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.

 

no its not question. i just shared for showcase

[Video Scroll Animation V2 (Showcase)]

Hey guys,

I added a scroll trigger to this script and added a progress scenario.

Original: 

See the Pen ZEbGzyv by j-v-w (@j-v-w) on CodePen

 

Rev- V2: 

See the Pen qBMxyWR by sawacrow (@sawacrow) on CodePen

[Scroll Trigger-Snap And Zoom is Possible?]

On 3/14/2023 at 1:23 PM, mvaneijgen said:

Hi @sawacrow what have you tried already?

 

Personally I would create a timeline and add your animations to that timeline instead of having a ScrollTrigger for each element like in the example. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

Here is a great tutorial how to start working with ScrollTrigger by not starting with ScrollTrigger. Just post back here with the animation you want to have and any follow up questions you have. Hope it helps and happy tweening! 

 

 

Sorry for the late reply.
I didn't have time for this job. I will try to solve it with the methods you mentioned. Thank you so much

[Hiring: Looking for someone who can create a frame by frame image scroll triggered animation]

job completed. thanks

[Scroll Trigger-Snap And Zoom is Possible?]

Hi all!

I am using the script from codepen for snap-scroll.

i like below web site scroll-zoom in-fade effect. is that possible on my scroll trigger?

https://futuregreensteps.com/ 

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

[Pseudo Class Error on Safari]

16 minutes ago, GreenSock said:

That is most definitely a browser rendering bug (unrelated to GSAP). Also, filters are HORRIBLE for performance, especially such a large blur, so be careful. Setting will-change: transform, filter seemed to resolve things for me and significantly improve performance: 

 

 

yes its about safari's render system.

thats solution awesome, problem is solved thank you so much !
 

[Pseudo Class Error on Safari]

Hello !

Below codepen is working well, (chrome and safari)

See the Pen LYGXrMq by DickeySingh (@DickeySingh) on CodePen

 ( original )

 

But im trying like above code some different method. Im trying on "::before" class. Thats working well on chrome but on safari working weird as you can see.

 ( Bugged, pseudocode class version)

 

( left side is chrome, right side is safari. you can see the distorted straight line lines.)

 

 

I can solve that problem if do original method but maybe there is a solution to this problem...

 

 

New bug detected:
error still on "absolute" items...

 

See the Pen abaqQeE by sawacrow (@sawacrow) on CodePen

[How Can I Add My Project To Showcase or Demos]

1 hour ago, Rodrigo said:

Hi @sawacrow,

 

Just share some links to your projects and codepens so we can take a peek.

 

Happy Tweening!

Sure, 

https://althausyachts.com/ 

I will share the other project link after it is published. thank you.
In such cases, I think it's enough to send you a message?
maybe a general demand issue can be opened for this.

[Backround image cuts of while moving up]

Hi,

If you're not doing it for GSAP practice, there's no need to overengineer it. you can do it with just CSS.
 

See the Pen ExeQyag by sawacrow (@sawacrow) on CodePen

[Whenever I do a scroll, it shows me a white screen for no reason.]

i see,
If you link it to a domain that we can access, we can see it.
you must verify your codepen accounts email btw. for view in full screen

[Whenever I do a scroll, it shows me a white screen for no reason.]

As Rodrigo wrote, there must be a site link, codepen, video, etc., for us to see the problem.
but if I'm guessing correctly, you want the selected element to be created/appeared in X orbit when scroll.

 

You can add the code below. and add "animate-on-scroll" class to your element. but don't use "container" class. because container have 100vh it can cause trigger issues. 

     if (document.getElementsByClassName('animate-on-scroll').length > 0) {
            gsap.utils.toArray(".animate-on-scroll").forEach(x => {

                var tler = gsap.from(x, {

                    ease: "sine.inOut", y: 50, duration: 0.75, autoAlpha: 0, scrollTrigger: {
                        trigger: x, start: "10px 80%", end: "+=100", //only to down
                        toggleActions: "play none none reverse", end: "top 100%",

                    }
                });
            })
        }

 

I think this part of your code seems very problematic. it may not make sense to use such a high value:

" end: "+=3500""