Need help please.

[DineshReddy]

Hi Everyone,

 

I was new to gsap you can see the design I have tried gsap scroll trigger. 

 

In the first section, when we scroll those transparent circles need to come from the blue circle and place into their particular points.

 

 

Also should support mobile I have tried using match media but not working.

 

I have written the code if any changes please let me know.

 

Please can anyone help?

See the Pen xxmxEpQ?editors=1010 by Aireddy-DineshReddy (@Aireddy-DineshReddy) on CodePen

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[mvaneijgen]

Hi @DineshReddy welcome to the forum!

 

As stated above let's take it one step at a time. I've removed a lot of your JS and just focused on the first section. I've created a timeline of all your tweens with one ScrollTrigger that controls the whole timeline. I've removed all the delays from your tweens and used the position parameter to animate all the tweens on the timeline. I've also removed the opacity for now to see where the elements are coming from, they are not coming from the blue circle, so if you want that you have to reposition them. 

 

See the Pen RwENdqy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Can you see, there is no ScrollTrigger in my demo, because the best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.

 

Below I've enabled ScrollTrigger and made .mobile-containers the trigger element, changed the start and end makers and set pin to true, so we can see the animation when it happens. 

 

See the Pen NWePJJV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I would advies taking a look at the following starting guides and with the notes above take it from there. If you still have questions post back here with just the question of one section. Hope it helps and happy tweening! 

 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

 

 

[DineshReddy]

27 minutes ago, mvaneijgen said:

Hi @DineshReddy welcome to the forum!

 

As stated above let's take it one step at a time. I've removed a lot of your JS and just focused on the first section. I've created a timeline of all your tweens with one ScrollTrigger that controls the whole timeline. I've removed all the delays from your tweens and used the position parameter to animate all the tweens on the timeline. I've also removed the opacity for now to see where the elements are coming from, they are not coming from the blue circle, so if you want that you have to reposition them. 

 

 

 

 

Can you see, there is no ScrollTrigger in my demo, because the best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.

 

Below I've enabled ScrollTrigger and made .mobile-containers the trigger element, changed the start and end makers and set pin to true, so we can see the animation when it happens. 

 

 

 

 

I would advies taking a look at the following starting guides and with the notes above take it from there. If you still have questions post back here with just the question of one section. Hope it helps and happy tweening! 

 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

 

 

Thank you so much. I have made changes as you said but when I used match media for about 1024 scenes. it still applies in mobile screens when a user visits the site for the first time after the site loads the positions of circles are still showing as a large screen. I have written separate posiotn for mobile screen separately in CSS media queries.

[mvaneijgen]

Do you have a minimal demo showing the issue with .matchMedia()? That way we can take a look. I see in your old demo that you use if (window.innerWidth >= 700), but GSAP has it own function for that https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

[DineshReddy]

11 minutes ago, mvaneijgen said:

Do you have a minimal demo showing the issue with .matchMedia()? That way we can take a look. I see in your old demo that you use if (window.innerWidth >= 700), but GSAP has it own function for that https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

@mvaneijgen Thankyou So much it worked.