Help Needed with GSAP Animation Issue

[saadk4777]

Hi everyone,
I’m working on a project to animate a laptop. The animation is working perfectly. However, when I scale the red screen to 1, the lines animation starts and show 2nd section in appears inside the lines 

Here’s what I’m trying to do:
When the scale is set to 1, I have a line shutter animation, but when the red screen scales to full size and I start scrolling, 20 lines animate from the middle. I then make the screen black, and the second section becomes visible as the lines are used as a mask or clip-path code. The pen link is attached.

Can anyone help me resolve this issue? I’m not sure why it’s behaving this way, and any assistance would be greatly appreciated!

See the Pen XJrxmmj by ITS-Solution (@ITS-Solution) on CodePen.

[mvaneijgen]

There is way to much code in this demo to help you all debug it. To get the most out of these forums try creating a minimal demo with just the bare minimum of elements. Most of the time just some coloured divs are all you need to demonstrate the issue. 

 

Next to that 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.  
  

There are certain properties you're better off not animating, top, bottom, left, right, width, height are some of them, most of the time there are transform properties that do the same, but have much better performance. Also GSAP exposes all the transforms for you, so transform: "scale(1) ", (note you also have a space here which could cause problems) becomes scale: 1, there are also dedicated percent properties for x and y eg y: "-100%", becomes yPercent: -100, check for more info https://gsap.com/resources/mistakes

 

Again if you still need help please provide a minimal demo with just the bare minimum of elements and javascript, just focusing on the issue you're having. 

 

Hope it helps and happy tweening! 

 

[saadk4777]

I want to apply shutter line animations when the laptop screen in scale 1 then lines appear and bigger on a scroll and show the 2nd section inside the line animation. basically line animation clip-path to 2nd section appears and then 3rd section will continue

 

[GSAP Helper]

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? 

 

Quote

➡️ 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 dependencies 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.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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. ✅

[saadk4777]

i have edit above minimal demo:  code please check

[mvaneijgen]

As suggested above I've removed ScrollTrigger and put all your tweens on the same timeline, then have GSDevTools installed, so that we can debug what your animation is doing. You were using GSAP an ScrollTrigger version 3.9.1, when starting a project be sure to always update do the latest versions to fix any bugs that may come from older versions!

 

Again all the issues are still present I already gave feedback on, so the first step would be to fix those. 

1 hour ago, mvaneijgen said:

There are certain properties you're better off not animating, top, bottom, left, right, width, height are some of them, most of the time there are transform properties that do the same, but have much better performance. Also GSAP exposes all the transforms for you, so transform: "scale(1) ", (note you also have a space here which could cause problems) becomes scale: 1, there are also dedicated percent properties for x and y eg y: "-100%", becomes yPercent: -100, check for more info https://gsap.com/resources/mistakes

In your CSS you also have  transition: clip-path 0.5s ease; which is really bad when animating things with javascript, again please check the docs  https://gsap.com/resources/mistakes 

 

Around the 3.8 second mark you can see something weird happening the timeline jumps back in time or something gets add to the timeline mid animation. I think this has to do with enableSecondAnimation(), personally I would just build the whole animation on one timeline, seen that they need to flow over in each other having it all on one timeline will be much easier and again remove ScrollTrigger and just build the animation you want to happen then when the animation is done add ScrollTrigger back in and have one ScrollTrigger control the whole timeline

1 hour ago, saadk4777 said:

When the scale is set to 1, I have a line shutter animation, but when the red screen scales to full size and I start scrolling, 20 lines animate from the middle. I then make the screen black, and the second section becomes visible as the lines are used as a mask or clip-path code

I've read this portion of your post a few times, but I do not understand what you want your animation to do compared to what it is doing now. 

 

The steps to fix your issues now are:

1. Remove transitions from your CSS 
2. Fix wrong usages of transform properties in GSAP
3. Add all tweens to one timeline and do not update the timeline halfway through, just create one big animation
4. Post back here if there are any issues with your animation. And explain and what the animation is doing now compared to what you want the animation to do.
5. Only if all things above here are fixed add ScrollTrigger back in to see how it works on scroll

Hope it helps and happy tweening! 

 

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

 

 

[saadk4777]

please  create on scroll for me i didn't understand second section still not visible on inside line

 

 

[Rodrigo]

Hi,

 

As @mvaneijgen already mentioned we don't have the time resources to provide general consulting services, solve complex logic issues or create custom demos for our users, is beyond the scope of what we do in these free forums. Also as already suggested I'd use a single timeline for everything and start as simple as possible.