[How to seamless change background color with gradient between section]

22 minutes ago, akapowl said:

Hey @kevchcm

 

You could hook the ScrollTrigger up to a tween instead of firing tweens in the callbacks, and add a scrub to the ScrollTrigger.

By setting an end, you can also define, how long ( and thus ) how smooth the transition from one color to the other should be.

 

 

 

 

Hope this helps.

Cheers,

Paul

 

Paul, thank you so much for your answer, it's exactly what I needed and sorry for my ignorance, but how can I achieve the same thing when the user scroll past the test, so now will go from blue to white

 

This is the udpated code

[How to seamless change background color with gradient between section]

Hello, I'm working with scrolltrigger and I'm trying to create a background color from white to blue when the users scrolls. The problem is that I want that transition to be very smooth but the results I have it's that the blue color appears once the trigger starts.

 

This website show an example of what I am trying to do https://demosnappy.webflow.io/product

 

Here is a video as well

See the Pen zYKrqbY by godhandkiller (@godhandkiller) on CodePen

[Alert when section passes midpoint of screen on horizontal scroll]

@ZachSaucier So sorry my bad. I was going to make to the codepen but then I started working on my code and I think I made it work! I wish I could show you a codepen but it would take me forever to do it with the actual functionality of my project but I want to show you the snippet of the code I ended up using 

 

filteredSections.each((i, section) => {
  let sectionId = $(section).attr('id');
  let offset = this.originalOffsets[sectionId] - 440;
  if(offset < 0) offset = 0;

  let filteredMenuItems = this.menuItems.filter(function(i){
    return $(this).attr('data-section') == sectionId;
  });

  ScrollTrigger.create({
    start: offset,
    end: `+=${section.offsetWidth}`,
    onEnter: () => {
      this.addActiveStateNavigation(filteredMenuItems)
    },
    onEnterBack: () => {
      this.addActiveStateNavigation(filteredMenuItems);
    },
  });
});

Basically on the end property you added a section.offsetLeft  so I just subtract the amount I needed so the scrollTrigger starts at a certain position on screen.

For the moment this is working fine I just need to fix some bugs on my part, If I have any other issues I would let you know (with an example this time!)

 

Thank you so much for your help

[Alert when section passes midpoint of screen on horizontal scroll]

1 hour ago, ZachSaucier said:

It doesn't look like you attempted to use the solution from the other thread that you linked to above. Or perhaps you didn't save? 

 

Anyway, here's something to get you started. This will fire a console.log() when each section reaches the leftmost part of the viewport:

 

 

Thank you Zach, I'm sorry if I'm giving you a hard time, I'm really struggling to understand the concepts on your plugin. 

I was checking out the code and I just another question if you can help me out with this. 

I have a sidebar menu on my website, so basically, and following your example, there is going to be a 230px left padding on the main container, so I have to take that into account when I'm checking if a section has enter or not.

 

I was moving the values of the "start" property on the sections scrollTrigger, basically I'm adding the 230 to the section.offsetLeft but somehow that makes all of the sections to trigger at the same time. Any idea how can I make this work?

[Alert when section passes midpoint of screen on horizontal scroll]

12 minutes ago, ZachSaucier said:

You'll need to loop through all of your elements in the horizontal section. If they have a corresponding element in the animation, you setup an animation and ScrollTrigger as necessary. The demo in the thread that you link to shows how to calculate the scroll position of each element (the vertical offset of the container plus the horizontal offset of each section). Use ScrollTrigger's callbacks to fire off your function.

Ok, so i did this simplified codepen of what I have on my code

See the Pen rNLvEvO?editors=1010 by godhandkiller (@godhandkiller) on CodePen

 

I added the markers so I can see what's happening. This first issue that I have is I have no idea how to move the "scroller-start" mark position, since I needed it more on like half the screen. Also I don't know what callback to use, I tried to use "onEnter" but it only fires once

[Alert when section passes midpoint of screen on horizontal scroll]

Unfortunately sections can have different width and not all of the sections have a "menu item" on the navbar, so I need to identify the ones that have (I can filter them with a class). Let me try and do a codepen and I'll posted.

 

I've been trying to follow the example you share on here 

 

But I haven't had success, since on this once you work with the content inside a section instead of the sectiontion itself plus I don't know how to put a function to know when the section its on the viewport.

 

[Alert when section passes midpoint of screen on horizontal scroll]

Hey guys, I have a question regarding this plugin. I have a website that uses horizontal scroll, the main div has children sections and the sections have their content.

Now a I have a separate navigation menu on top and what I need to do is to show which section you're in, so I need to track when a section has pass the middle of the screen so I can highlight the navigation menu. It's there a way to do this with this plugin.

I don't have a codeped but here is the link to my website https://dev-shapetx.pantheonsite.io/

 

This is the code that I use to initiate the plugin

 

this.scroll = gsap.to(this.container, {
  x: () => -( (this.container.scrollWidth - document.documentElement.clientWidth) ) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: this.container,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 0.2,
    end: () => "+=" + (this.container.scrollWidth - document.documentElement.clientWidth)
  }
});

 

[ScrollTrigger - Horizontal Scrolling]

On 10/9/2020 at 6:21 AM, ZachSaucier said:

If you need to support both (mouse and side scrolling) it'd probably be best to use a library like HammerJS to detect when someone has swiped sideways and then move the page accordingly. But yes, it's definitely possible.

Hey thank you for the suggestion, unfortunately that plugin didn't work, but I'll try to make it work with javascript. 

 

 

I have another question regarding my horizontal scroll site https://dev-shapetx.pantheonsite.io/therapeutics-platform/
Is there a way to know when a section is visible on the viewport. I have to add some animations to the text when a section shows up

[ScrollTrigger - Horizontal Scrolling]

On 6/2/2020 at 11:59 PM, GreenSock said:

The problem is that your #container element is NOT the full width of all its contents. It is only as wide as the screen. So everything is working the way it's supposed to from GSAP's perspective, but you've got it only moving xPercent: -100 which means it moves to the left by the width of the screen (not nearly enough). 

 

So all you'd need to do is correct the distance you want it to travel so that it's the entire width of all your elements MINUS the width of the screen (otherwise it'll go all the way off the screen). So your tween could be: 

 

gsap.to(container, {
  x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: container,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 1,
    end: () => "+=" + container.offsetWidth
  }
})

Here's a fork:

 

 

 

Is that what you were looking for? 

 

I used this example for a website and I't works great but I have a problem, my client want this to work with a trackpad, so like if you're in a macbook you can swipe to the sides instead of up/down, it's there a way to do this?

 

Here is my website https://dev-shapetx.pantheonsite.io/therapeutics-platform/