[GSAP + ScrollTriger (change background color for each section, only two colors)]

9 hours ago, akapowl said:

Hey @TheVesta

 

There is multiple approaches to this - you could for example set up a large timeline with multiple tweens to handle the color changes as in this thread for example.

 

 

 

Or you loop over the sections and add some sort of logic of your own.

Like in this example I'm checking on the data-color attribute I added to the sections.

 

If it's 'dark', the backgroundColor for the wrap will tween to dark, else it will tween to light. Hope that helps.

 

Edit: You could use the same logical approach with a check on the classes you have on the sections.

I just like to do it with data-attributes

 

Oh, Thank you, you really helped me!

 

Can I do so that the color of the text change relative to the background? If the background becomes gradually black, then the text should become gradually white.

[GSAP + ScrollTriger (change background color for each section, only two colors)]

Hello! I need your help. I had difficulty writing a JS code for changing the background. I have only two colors, it's black and white. The first section should be black, the second section is white, the third section is black, the fourth section is white and so on. 

 

At the same time, I want the background to change smoothly when scrolling down. As it happens now for the first two sections.

 

Is it possible to do this?

See the Pen XWMKWxd by victor_trunov_ (@victor_trunov_) on CodePen

[Problem with animation and keyboard on mobile device]

42 minutes ago, Shaun Gorneau said:

I don't see this issue in iOS Safari ... in which device/browser are you seeing the issue?

Android Google Browser. The problem is that the keyboard appears at the bottom of the screen and shifts up the area with the content. As a result of the shift, the animation is re-triggered. When the keyboard disappears, the animation restart again.

[Problem with animation and keyboard on mobile device]

Hello! I had a new problem. I use GSAP and ScrollTriger. On mobile devices when I click on Input, the keyboard appears, because of this restart the animation. Animation is also restarted after the keyboard disappears. Is it possible to overcome?

I really hope for your help.

See the Pen BapLEqJ by victor_trunov_ (@victor_trunov_) on CodePen

[Scrolltriger and Restarting animation effects]

Thank you for explained to me. These are very valuable knowledge. I am glad that I use GSAP and there is good support 🙂

[Scrolltriger and Restarting animation effects]

But why is it better not to write?

transform: 'translate3d (0, 550px, 0) scale (1)

 

[Scrolltriger and Restarting animation effects]

5 hours ago, GreenSock said:

x: 0,
y: 550,
scale: 1

Is that what you mean? 

Yes, it's great! Thank you!

 

 

 

[Scrolltriger and Restarting animation effects]

28 minutes ago, GreenSock said:

Oh, and a side note: I strongly recommend avoiding string-based transforms, but instead you should tap into the components for transforms:

// not as good
transform: "scale(1.2)"

// better
scale: 1.2

 

Oh, thank you! 

 

let transform3d = gsap.utils.toArray('.transform3d')
    transform3d.forEach((itemTransform3d, index) => {
      let elemstrokeLight = gsap.to(itemTransform3d, {
        scrollTrigger: {
          trigger: itemTransform3d,
          start: "top 100%",
          scrub: true,
        },
        transform: 'translate3d(0, 550px, 0) scale(1)'
      });
    });

But how can I be if I have such a code?

[Scrolltriger and Restarting animation effects]

24 minutes ago, GreenSock said:

Welcome to the forums, @TheVesta. I'm not sure I understand what you're saying - do you have a video? 

 

My guess is that you have your code running BEFORE the images download, and since you don't have the sizes set in the HTML or CSS (width/height), the page renders with a zero height/width for those initially and then as they load they populate and alter the layout/position of everything else. 

 

I'd recommend setting explicit width/height for your elements to avoid that layout change onload.

 

The main problem may actually be that you're fading in elements BEFORE the images actually load, thus by the time the images load, the elements are already at an opacity of 1, meaning they suddenly appear instead of fading in. Again, the solution would be to wait for those images to load BEFORE you do the fading in. None of this has anything to do with GSAP, just so you know. 

 

I hope that helps!

Thank you! You helped me very much! I recently use GSAP, I have difficulty, but it is very interesting for me.

[Scrolltriger and Restarting animation effects]

Hello! Please help me. I have a sample code on Codepen 

 

I have the following problem: 

1) I clean the Google Chrome browser cache on Android.
2) I open the page and move to the end of the page.
3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created.

 

Please help solve it.

 

P.S. If I just refreshed this page without cleaning the cache, then there will be no problems.

See the Pen vYgKmwM by victor_trunov_ (@victor_trunov_) on CodePen