[gsap horizontal scroll with parallax. need to figure the first element parallax position before the scroller pins and animation starts]

On 1/4/2023 at 7:20 AM, GreenSock said:

The issue is that you've got the start value set up on that first on so that it's BEFORE the container animation's beginning. Don't worry, we can still solve it...

 

onRefresh: self => {
  if (self.start < 0) {
    self.animation.progress(gsap.utils.mapRange(self.start, self.end, 0, 1, 0));
  }
}

For ScrollTriggers that are attached to a containerAnimation, the start/end values are actually progress values (between 0 and 1, referring to the progress of that containerAnimation). So we can simply sense if the start value is NEGATIVE (meaning it's set to start before the containerAnimation's beginning), and adjust its progress accordingly. the gsap.utils.mapRange() is perfect for that. We're basically trying to figure out what the progress value of that tween would be at the 0 point of the containerAnimation. For example, if the start was -0.25 and end was 0.25, then 0 would fall right in the middle, thus its progress would be 0.5 (50%). 

 

Here's a fork: 

 

 

 

Does that clear things up? 

 

Hi! I would like to know why the picture has a blue background if the width of the picture is not set to 100vw, but for example 70vw? 
Is there any way to apply this script for small images that do not take up the whole width? 

I have attached a screenshot, you can see there. I just changed the width

.panel-wide {
  width: 70vw;
}

 

[horizontal scroll + Letter animation]

I realized my mistake! Thank you so much for helping me figure it out!  mvaneijgen

[horizontal scroll + Letter animation]

dear GSAP community, my strength is running out, I've been struggling with a simple task for a long time and I'm asking for help. 

My task is to realize the movement of text from right to left while playing a letter-by-letter animation. An example of what I want to do is realized on the site https://www.flshfrm.com/ (I attach a link to a screenshot).

I will be very grateful if you can tell me where I am making a mistake. 

See the Pen GRPNzOO by AlexDevW (@AlexDevW) on CodePen

[ScrollTrigger to trigger background color change]

11 hours ago, OSUblake said:

 

Thank you so much! 
It works great!

[ScrollTrigger to trigger background color change]

7 hours ago, Cassie said:

Hi George! 

 

You haven't got any logic in place for the button at all. What have you tried so far?

 

You'll likely need to toggle a boolean like so.

 

let contrastMode
button.addEventListener(click, (e) => {
 contrastMode = !contrastMode;
  
 if(contrastMode) {
   // make sections black and white
 } else {
   // make sections original colors
 }
})

 

If you give it a go we can help to nudge you in the right direction, but unfortunately we don't offer free custom solutions in these forums.

 

The GSAP part would be similar to what you have here already - just a tween that changes color. The tricky bit will be the logic of what happens with the scrollTrigger when the state changes - if you need scrollTriggered sections that change color too you'll need to use variables for the colors, update them in your logic loop and call scrollTrigger.refresh() to update the values
 

 

Hi, yes i already tried to do different things with both jquery and javascript
Please look now, I added some very simple code

$('.change-color').click(function() {
  $("#id").attr("data-color","#000000"); 
  console.log('change dark-mode');
  scrollTrigger.refresh()
})

 

 

See the Pen RwLXmwB by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

 

But nothing happens, I seem to be calling the scrolltrigger.refresh() method incorrectly

[ScrollTrigger to trigger background color change]

14 hours ago, OSUblake said:

Привет Джордж,

 

Я все еще не уверен, что вы пытаетесь сделать. У вас есть код ScrollTrigger, который меняет фон, но теперь вы говорите, что хотите, чтобы кнопка менялась на фон, так что же это?

I want to change the attributes of the sections by clicking on this button, I want the data-color to change

For example: class='section s-1' has data-color='#838C8B'.
By clicking on the button, I want to change the data-color='#000000'
make the background black, and in the section class='section s-2' make the data-color='#ffffffff'

Here's the site I'm working on, here the designer wants me to change the colors to contrasting (black and white) for the visually impaired when I click on the eye

https://function-x-siberia-site.webflow.io/

 

 

[ScrollTrigger to trigger background color change]

On 1/16/2022 at 1:07 AM, OSUblake said:

Hi @GeorgeErshov

 

Can you create a new topic with your question and include a minimal demo? Thanks!

 

Hi, sorry it took so long

Here's a simple demonstration. I want to click-me button (class='change-color') to change the color of all sections that have data-color, to a different color (the designer came up with a dark theme)
 

See the Pen RwLXmwB by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[ScrollTrigger to trigger background color change]

guys, can you help me?
I want to change the background color when I click

I use the code: 

gsap.utils.toArray(".section").forEach(function (elem) {

    var color = elem.getAttribute('data-color');

    ScrollTrigger.create({
        trigger: elem,
        start: 'top 30%',
        end: 'bottom 30%',
        markers: false,
        onEnter: () => gsap.to('main', {
            backgroundColor: color,
            duration: 1.4
        }),
        onLeave: () => gsap.to('main', {
            backgroundColor: '#fef9ef',
            duration: 1.4
        }),
        onLeaveBack: () => gsap.to('main', {
            backgroundColor: '#fef9ef',
            duration: 1.4
        }),
        onEnterBack: () => gsap.to('main', {
            backgroundColor: color,
            duration: 1.4
        }),
    });
});

this is to change the background color when switching to another section

Now I want to use simple code: 

const elem = document.querySelector(".section.hero");
const switcher = document.querySelector(".switch-theme");

switcher.addEventListener('click', function() {
  if (elem.hasAttribute == ('data-color', "#FEF9EF") {
    this.setAttribute = ('data-color', "#000000");
  }
});

To click on the element to change the color of my section, but I get an error instead

Is it possible to change the data-color dynamically somehow?

 

[smooth change background color (for each section using data-color)]

21 minutes ago, Cassie said:

Hey there George!

 

You're calling tweens in the callbacks, so popping a duration on the scrollTrigger itself won't affect anything.

If you want the transition to last a longer amount of time you'll need to add a duration to the tweens themselves.

 

ScrollTrigger.create({
        trigger: elem,
        start: 'top 30%',
        end: 'bottom 30%',
        markers: true,
        // this won't do anything
        duration: 5,
        onEnter: () => gsap.to('main', {
            backgroundColor: color,
            // this will slow down the transition
            duration: 2
        }),
    });

 

Happy tweening! ✨

Yes!
Thank you, I should have known) 

[smooth change background color (for each section using data-color)]

hi all

I'm trying to figure out how do I make the background color change seamless?
I added duration: 5 to my code, but it didn't work
I want to use my code to achieve a smoothness like in this example

See the Pen 01371330dbdec800579a15bebd463bef by akapowl (@akapowl) on CodePen

 

in my example the transition works fine, but it is too abrupt, too fast

 

See the Pen GRMRxzw by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[Locomotive scroll + GSAP, randomly cut the page]

32 minutes ago, GeS said:

Yes, I have the same problem
Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?
https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL?

strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site

 

I found the answer to my question, if you are interested read it
The problem is due to pictures that didn't show up in time
https://github.com/locomotivemtl/locomotive-scroll/issues/220

 

 

I loaded the imagesLoaded.js library and then put one line of code and almost everything works perfectly (it doesn't load literally 30 pixels of the image, but it no longer crops the site as much as it used to)

 

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

imagesLoaded('.root', { background: true }, function () {locoScroll.update();});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();

[Locomotive scroll + GSAP, randomly cut the page]

On 6/9/2021 at 3:42 PM, Stacie said:

Hi guys,

I'm trying to implement Locomotive smooth scroll and GSAP library to my website.
The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section.

I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help!

 

Here is the CSS and Javascript that I use in my project: 

Yes, I have the same problem
Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?
https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL?

strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site

 

[Locomotive Scroll and GSAP]

On 9/16/2020 at 5:48 PM, nolafs said:

I notice a strange behaviour. For some reason, my scroll container gets set to opacity 0 at some point. No error,  randomly. Anyone experience the same issue? 

Yes, I have the same problem
Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?
https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL?

strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site

 

[Automatically arrange the elements on top of each other. Drag and Drop]

Okay! Thanks again)

 

[Automatically arrange the elements on top of each other. Drag and Drop]

Oh Cassie
Thanks! that's exactly what I'm trying to do ❤️

[Automatically arrange the elements on top of each other. Drag and Drop]

@Cassie 

Hello, Cassie)
My studio where I work has a purchased membership and I can use all the plugins.
I'm just experimenting from my personal account.

I can't quite figure out how to get my items to be dragged and dropped into completely different locations
Here's an example of their location

By sorting I mean the functionality when they can be shuffled (the 1st item can become the 4th item. The 3rd can take the place of the 2nd item, and so on). But only when these elements are already inside the block where we move them

[Automatically arrange the elements on top of each other. Drag and Drop]

Please tell me how to make when you move an element in a block ("Drop area") elements become automatically on top of each other.
And to be able to sort them

 

 

an example of what I want to achieve

See the Pen waVYvz by osublake (@osublake) on CodePen

 as in the example above

See the Pen abyJdxJ by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[locomotive not playing scrolltriggers until window resized.]

What could be the reason

in the vs code editor in live server mode I cannot see the black block s3 after the animation has worked in block s2
But in codepen everything works as it should?

I need to squeeze the screen and then the animation works, tell me what is done wrong?

See the Pen NWvRPor by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[skew on scroll]

thank you so much, Paul! Everything works perfectly. 

[skew on scroll]

have a nice evening.

I can't figure out why the console gives out the gsap target skewElem bug not found. I gave a class to my element which should perform the skew action.

example effect:

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

help please

See the Pen bGeWNOE by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[background color change]

Thank you🙂

[background color change]

you're probably right... I changed it to color, changed not much the name of the variable and everything works. The only thing I do not understand is why gray appears. It is only visible for the first time when you open a project. Look, please, what can you say?  between section one and section two

[background color change]

Hello, everyone. Please tell me what I am doing wrong. I want to achieve an effect like in this example:

See the Pen xxVLwzJ by mikeK (@mikeK) on CodePen

Only with locomotive scroll. Here is my demonstration. Where did I make a mistake? My sections do not change color.

See the Pen bGeWNOE by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[anchor links with SmoothScrollBar]

why am i so inconsiderate?
Thank you again! I will certainly show you my project when I finish, without your help I would not have achieved such a result!) I will mention you in my project!

[anchor links with SmoothScrollBar]

Hi. 
I apologize in advance for asking a question not quite on the topic of GSAP. This topic maybe of interest to many who use smooth scrolling.
Before writing here, I tried to solve the problem on github, but without success. Nobody answered me within a month.
my question is very simple: I use smoothScrollbar (https://idiotwu.github.io/smooth-scrollbar/) and I want to implement anchor links, but I have not found a solution. However, I was able to implement anchor links with another library: locomotive scroll. I just used this code 

const slider= document.querySelector('#main-2');
$('.link:nth-child(2)').on('click', function() {
    locoScroll.scrollTo(slider)
});

however, the same operation was not useful for smoothscrollbar. In my montage, everything breaks down. If someone has an example on codepen please share it. 

See the Pen bGeWNOE by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen