terwanerik/scrolltrigger

Let your page react to scroll changes.

scrolltrigger's Issues

Delay OUT class until the element leaves viewport

Hi,

Loving this plugin, thanks!

Just a quick one - is there an easy way to prevent the 'out' class being assigned to the element until after it has left the viewport?

We have panels that we are animating the text up (and fading in) when it comes into the viewport but would like to prevent the fade out and drop down until after the block has completely left the user's viewport.

Sorry - one other thing - If an element is absolutely positioned to the left and then translated on the X axis with a negative percentage value, such as:

position:absolute;
left:0;
transform: translateX(-3%);

I cannot get the scrollTrigger to trigger. I see from another post that you recommend adding an offset but I can't get this to work with a percentage (used instead of px due to responsive nature). Any thoughts on this would be much appreciated too. :-)

Cheers,

Will

data-scroll-showCallback not calling function

https://codepen.io/megalofauna/pen/bWYRKP

When you have time, I wonder if you could look over the pen above and let me know why the data-scroll-showCallback attribute does not call the function.

I'm sure there's a simple reason I'm missing.

BTW, awesome bit of work, this! If I could star your repo twice, I would. Thanks!

Not working on iOS

Hi,

Your demo page is working great, but my implementation of ScrollTrigger is not working on iOS. I am trying to track down the issue now. I am calling jQuery before it, which I think may be a factor. The initial invisible class is being applied, but not the visible

horizontal scroll not working<eom>

No trigger when element is out of the viewport (on the left side)

Hello,

I have an issue with all the elements that are a bit out of the viewport, on the left.
For instance, if a div has the following style: "transform: translateX(-20px)", nothing will be triggered.

Thank you for your help.
Best regards,
Jeremy

default options in the init function

Hi, is it possible to set default options in the init function?
So that I don't have to write it in the data-options again and again?

NPM support

Do you have any plans to publish this library to NPM? Would love to be able to bring this into my build system and update automatically if possible

New features in v1.0

Alright, i'm starting this thread for new features you'd like to see in ScrollTrigger v1.0. I'd like to make the options more JS instead of passing them as attributes. If you have any thoughts, please comment below.

So far i got:

• Different offsets for the 'in' and 'out' (including addWith and addHeight)
• Using percentages and user defined functions as offset, for dynamic offsets
• Allowing multiple classes to be toggled
• Add logic to wait for animation to finish until toggling class

custom data-scroll-showCallback="drawIt()" not firing

My custom callback is not firing when the item is already in view on refresh, it only fires when I do a little scrolling.

I see that the visible class is added on init, so it's specific to the custom callback.

How can I refresh scrollTrigger?

I'm using scrollTrigger on a site that uses pjax, and it works great, except when I use the "once" option with a trigger.

Since a trigger is removed from the triggers array in this case, there's no way to for me to refresh/recollect those triggers later.

There should be a re-init/refresh method to call otherwise my triggers that are set to show once don't ever work again in an ajax environment.

ScrollTrigger - callback not woking if element is already shown!

I have a problem.
When user go from another section to coresponded with animated elements - all works ok.
But, when user reload page and browser brings him back to this section - is the situation same as if element is already shown for user.
For this use cases callbacks passed as data-scroll-hideCallback or data-scroll-showCallback will not work!
How to fix that?
https://codepen.io/7iomka/pen/yZZMxw

Distance and scale variables

Suggestion: Add in and out variables to set:

1. animation distance
2. scale
3. speed

Elements slightly out of window not firing

Hi, thanks for this code, it's pretty handy. However, I have noticed one element which starts slightly off the window (with a translateX of -100 and a css rotation in this case) never fires on vertical scroll. I have tried doing xOffset but I think that's for horizontal scroll.

Is it a limitation of the software that all elements must start wholly within the window on the x axis for them to activate with vertical scrolling?

bower main

Hi, script is really awesome.

I would have thought the bower 'main' should point to the unminified script, as most bower setups would be running packages through minification on build.

Not working in Firefox or IE

Thanks for this, looks great, but seems to be only working fully in Chrome.
https://terwanerik.github.io/ScrollTrigger/

Elements with negative offset invisible on first load if at top of viewport

If an example with a negative offset is at the top of the viewport it will not be considered visible until the page is scrolled.

<div data-scroll="offset(0,-200) once">
This element will have the class "invisible" until some scrolling occurs.
</div>

Example of the problem:
https://codepen.io/anon/pen/ReZrzv

Bootstrap compatibility

Instead of using the ".visible" and ".invisible" class, try to prefix them so they don't interfere with Bootstrap's visibility classes.
https://getbootstrap.com/docs/4.5/utilities/visibility/

Responsive offset

Hi, just checking if there is maybe some built in way of switching offsets based on screen resolutions?
Or should I just check for desired screen size via simple if/else and switch accordingly.

For example, I would like to have y: 0.6 to be y: 0.2 on smaller screens.

trigger.add('[data-anim]', {
      offset: {
          element: {
              y: 0.6
          }
      },
      toggle: {
        callback: {
          in: () =>{
              animationScene.play()
          }
      }
      }
  })

Can't access the html element in custom animations

I tried with "this" but it does not work :

`document.addEventListener('DOMContentLoaded', function(){
var trigger = new ScrollTrigger();

var callback = function(scrollLeft, scrollTop, width, height){
console.log(this);
trigger.detach(callback);
};

trigger.attach(callback);
});`

Any ideas what I'm doing wrong ?

Use of .invisible as the class

Can you change the class .invisible to say .trigger-invisible (and trigger-visible) as Bootstrap already uses .invisible to hide elements.

IT IS NOT AN ISSUE. JUST WANTED TO SAY THANK YOU

You guys are the best ones around. It took me ages to find smt like this data-scroller trigger and i found yours. It is really simple and fantastic.

Add animation delays

wow.js does this very nicely via:
data-wow-delay="5s"
It would be nice to see a similar feature in ScrollTrigger.

Jumping when URL bar disappears on Android

The demo page jumps up and down a hole section when scrolling so the URL bar hides and shows (on Android, hasn't tried on iOS). I guess because the viewport height is changing when the URL bar hides or shows, and some calculations of the pages scroll position is based on the viewport size.

The bug is more visible in Chrome then in Firefox.

Locomotivescroll

Hello there!

I have one question. Can i use locomotive scroll with scrolltrigger ?

Thanks

The visibility check on Microsoft Edge is always true

The _checkVisibility function uses the x and y values from the 'rect' object returned by getBoundingClientRect().

The getBoundingClientRect() function on Edge does not return these values so they are undefined.

Setting rect.x to rect.left and rect.y to rect.top fixed my issue on Edge.

explorer error

HI. Thanks for making this good plugin.
It works good but doesn't on Explorer. Because there are some codes that Explorer does not support.
Although there's few people using Explorer, but still some contries use Explorer. I hope this support on Explorer.

Thanks.

Allow use multiple classes in toogle

data-scroll="toggle(.animated .boundIn, .animated .boundOut)"

Horizontal scrolling - text blocks not appearing on Android Lolipop

I'm presuming there are text blocks in the various sections as your scroll horizontally. They don't load for me on Lollipop 5.0.1 / Chrome / Samsung Galaxy S4. Vertical scroll works very nicely, am exit with the jump due to the address bar issue

scroll does not into correct position

it sits about 1px above the section so when I click on my first nav it doesn't show it as being active, when I click on menu 2, menu 1 is highlighted as active but it has scrolled down to section 2, please help

overflow-x: hidden chrome problem

Hi,
got problem when "overflow-x: hidden" is set for html, body the scrolltrigger is not working in chrome browser. In other browsers is everything working smoothly.

thanks

Advanced Animation - Example

I was able to setup an advanced animation pretty quickly, which you can preview here: http://nickdimatteo.com/scrollTrigger/example/

I'm curious if (1) this is your recommended solution for such a case, and (2) to take a look on mobile, since it appears sometimes if you scroll too fast the top section fades in/out when it shouldn't.

Halt autoplay interval when carousel isn’t within the viewport

Hello! I’m a total JavaScript uninitiate and I’ve been trying to understand how I can achieve this for quite some time now.

I have a Siema carousel setup in which the slide changes every 2 seconds but stops when the user interacts with the carousel (either by sliding or by pressing the slide controls). A live demo can be seen on my website.

I’d like to know if I can pause the slide interval when the .siema element is off the viewport. Can I achieve that with ScrollTrigger?

This is my Siema code, by the way:

// SIEMA

const mySiema = new Siema({
    duration: 250,
    loop: true,
    easing: "cubic-bezier(.42,0,.58,1)",
    onInit: printSlideIndexWithIndicator,
    onChange: printSlideIndexWithIndicator,
});


// INDICATORS

function printSlideIndexWithIndicator() {
    let currentSlide = this.currentSlide;
    let currentSelector = document.querySelector('.siema-current');
    let totalSelector = document.querySelector('.siema-total');
    /*let zoomSelector = document.querySelector('.siema-zoom');*/
    if (currentSlide < 0) {
        currentSelector.innerHTML = this.innerElements.length + currentSlide + 1;
    } else {
        currentSelector.innerHTML = this.currentSlide + 1;
    }
    totalSelector.innerHTML = this.innerElements.length;
}


// AUTOPLAY

const myInterval = setInterval(() => mySiema.next(), 2000);

document.querySelector(".siema-prev").addEventListener("click", () => {
    mySiema.prev();
    clearInterval(myInterval);
});
document.querySelector(".siema-next").addEventListener("click", () => {
    mySiema.next();
    clearInterval(myInterval);
});
document.querySelector(".siema").addEventListener("mousedown", () => {
    clearInterval(myInterval);
});
document.querySelector(".siema").addEventListener("touchstart", () => {
    clearInterval(myInterval);
});

Add settings inline with [data-trigger]?

Is it possible to add settings inline with [data-trigger] rather than setting them in the JS?

scrollmagic

Is it possible to do scroll magic like tweening with this plugin, which reacts live to scrolling, not just triggers ;) #curious

Problem with multiple instances in the viewport

There's a problem with multiple instance in the same viewport where the once option is set to true. It removes the trigger after showing it here on line 372:

// remove trigger from triggers array
triggers.splice(i, 1);

This causes a change in the length of the triggers array and so the for loop doesn't loop over all the triggers thus not showing all instances. I've fixed this by adding an extra internal option 'shown' to the trigger object and set that to true instead of removing that trigger from the array. Then I wrapped the entire block inside that loop in if(!trigger.shown)

Maybe this is not the best approach, but it works for me now.

ScrollTrigger doesn't seem to work for sliding animations

I need to slide elements into my page from the side. ScrollTrigger has issues doing this because it flickers the visible/invisible classes rapid-fire constantly while scrolling. See the demo below showing the issue. Open your web inspector and scroll to the blue section and note how the classes flip rapidly back-and-forth while scrolling, even while the element is totally visible.

<!DOCTYPE html>
<html>
<head>
<title>ScrollTrigger bug demo</title>
<script src="https://apps.vividimpact.com/proofs/vividimpact.com/wp-content/themes/vivid-impact-theme/ScrollTrigger.min.js"></script>
<style>
	.visible {
		margin-left: -1000px;
		animation-duration: 5s;
		animation-name: slideAcross;
	}
	@keyframes slideAcross {
		from {
			margin-left: -2000px;
	}		
	to {
		margin-left: 2000px;
	}
	}
</style>
</head>
<body>
<div style="height: 3000px; background: red;"></div>
<div data-scroll style="height: 100px; background: blue;"></div>
<div style="height: 3000px; background: green;"></div>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		var trigger = new ScrollTrigger();
	});
</script>
</body>
</html>

Use IntersectionObserver for better future performance.

IntersectionObserver is way faster than hooking into the scroll.

Then add the polyfill 👍

w3c/IntersectionObserver#135

timed delays

Add a time delay parameter eg data-scroll-delay=".5s" or data-scroll-delay="1.5s"

Callbacks don't work with nested functions

I have been trying to organise my callbacks into an object to avoid polluting the window namespace but have found that ScrollTrigger cannot call them.

This fails:

data-scroll-showCallback="myProject.doStuff"

I have also found that there is a problem with passing arguments - I think this is because you are using call when you should be using apply.

So, on line 613, this:

window[method].call(trigger.element, params);`

should read:

window[method].apply(trigger.element, params);`

Call only takes parameters not a node to apply the function to.

overflow-y: scroll multi browser issues (doesn't show\animate)

first an apology, I'm not the best with front end development, so go easy on me if I'm making a stupid mistake.

I've come across an issue where overflow-y: scroll on a div is causing ScrollTrigger not to fire, rather the element with the data-scroll attribute remains hidden.

I've test with Chrome 80, FireFox 74, and whatever Edge is at as of today...

Below is the link to the codepen... I figured it might be better to just post a link to that instead of copy all the code here, but if not, I'll be happy to provide whatever answers y'all need from me.

Though here is a very rough layout. overflow-y: scroll is on main-container and there's a lot of flexbox involved. Removing overflow-y: scroll fixes the problem, but of course messes up the layout.

<body>
  <div class="page">
    <div class="page-container">
      <div class="page-header"> 
      </div>
        <div class="main-container"> 
          <div class="article">
          </div>
          <div class="article" data-scroll>
          </div>
          <div class="article">
          </div>
        </div>
        <div class="page-footer">
        </div>
      </div>
    </div>
</body>

https://codepen.io/david-angel/pen/Poqrbxx

Thanks in advance (for your patience with me.)

How do I pass arguments or parameters to the callback function?

Hi there,

Thanks for the great script!

I have a problem that I've not been able to figure out yet. I want to be able to pass arguments to the data-scroll-showCallback function. Specifically, I would like to pass: 1) the HTML element that contains the data-scroll-showCallback attribute as the first argument; 2) a number; and 3) a Boolean.

Thank you for any help you can provide,
Jeremy

Add parameter to wait animation or transition ending

If you quickly roll the roller up and down, then the jumps are obtained, it would be great to be able to switch after classes only after the animation (transition) has ended.

Can an on-screen element trigger an off-screen element?

Is it possible for object id A, once on-screen, to trigger a show / hide class change on object id B, which is off-screen?

I'm guessing that ... perhaps ... the correct approach involves creating a callback for object A that passes B as an argument, like in this issue?

#34

Make it possible to trigger javascript functions

Maybe a possibility to trigger javascript functions when element comes into view.

Like

New data-scroll syntax

There is something i do not like about the strictly positioned parameters, they feel a bit old-school and sluggish, and way to strict. I would like a looser approach.

I was thinking about this yesterday, what do you guys think? Instead of having the scroll offset as the first parameter, being ambiguous and all, like so:
<div data-scroll="150 animateIn animateOut once"></div>

How about something more clear, like so:
<div data-scroll="animateIn animateOut offset(0,150) once"></div>

That way it is not strict to the first parameter, and we can use it for x as well as the y position. So now the only 2 strictly positioned parameters are the animateIn and animateOut classes. We can also eliminate those with something like this:
<div data-scroll="in(.animateIn) out(.animateOut) offset(0,150) once addHeight"></div>

That way the code is way more legible, adding the dot before the animateIn and animateOut classes hints the user that its a CSS class.

Another approach would be to use a single parameter for the animateIn and out classes, like so:
<div data-scroll="toggle(.animateIn, .animateOut) offset(0,150) once addHeight"></div>

What would you guys prefer?

Triggers not firing with css scroll-snap

Can not seam to be able to combine css scroll snap and scroll triggers. Is this a known issue?

Odd Issue with Toggle

First, this is a fantastic script. Thank you so much for publishing it.

I have noticed an odd issue when using the toggle() attribute. If the class you are toggling has too many hyphens, the toggle will fail to execute. This could come up as an issue for those using a BEM pattern for their coding.

As an example, these class will work correctly:

• storefrontStoryInvisibleRight
• storefront-story-invisible-right
• storefrontSotry--invisible-right
• storefront-story--invisibleRight

However, the correct BEM structure for this will fail:

• storefront-story--invisible-right

I have scanned through the code, but I am stumped as to why this is happening.

Not compatible with safari

These two lines not works in safari, because safari doesn't respect document.documentElement.scrollTop/Left

ScrollTrigger/ScrollTrigger.js

Lines 548 to 549 in 56b4b04

	var currentTop = !_this.bindElement.scrollTop ? document.documentElement.scrollTop : _this.bindElement.scrollTop;
	var currentLeft = !_this.bindElement.scrollLeft ? document.documentElement.scrollLeft : _this.bindElement.scrollLeft;

This is a complicated topic, so I just put a reference here, it is up to you to decide choose which solution: https://stackoverflow.com/questions/20514596/document-documentelement-scrolltop-return-value-differs-in-chrome/33462363#33462363

mobile views

Hi i am beginner at coding and i have problem on mobile device. It doesn´t display anythink what i want to animate. On PC it works. In another on scroll animate plugin they had possibility to forbidden animating when display width is less then 700px for example, it´s up to you. I want to ask if you have some solution for mobile device ?

Trigger animations a single time

Set an option to initiate css animations only once.

Perhaps <div data-scroll="150 animateIn animateOut true once"></div>