jquery trigger GSAP function if element is in viewport

[DD77]

I need to make working this functionality,  basically I need to trigger the GSAP function when the element is in viewport. 
I'm adding the class and is going all fine, but then I need the function to  work on the elements and animate them. 

I don't intend to use Scrollmagic 

 

See the Pen qPLoKP?editors=1010 by davide77 (@davide77) on CodePen.

[Shaun Gorneau]

You can do this rather simply with the following ...

 

See the Pen JrwxXQ by sgorneau (@sgorneau) on CodePen.

 

If you need something a little more complex and have an objection to ScrollMagic, you could look at the WayPoints jQuery plugin.

[DD77]

thanks, but doesn't work as I want. In here all elements runs in the same time and I need the animation to happen when the get in view. So I still need my in-view class and I need to trigger (separately) all the elements

[Shaun Gorneau]

Well, this was just a little guidance. You can simply do the same thing for each element that needs to trigger a timeline. And, if you are going to be triggering many items (more than 5, I would say) I would defintely reconsider your position on ScrollMagic.

[DD77]

Thanks, I have made the demo with with scrollmagic but  is not perfect. The element should be triggered only once not up and down also the first element is not responding properly. Feeles like I do one step forward and two backwards..

See the Pen LzMXRW by davide77 (@davide77) on CodePen.

 

[Shaun Gorneau]

If you would like an/each element to be triggered only once, you should set the ScrollMagic Scene's reverse property to false.

[PointC]

Hi @DD77

 

Welcome to the forum.

 

As @Shaun Gorneau mentioned, you'd want to set the reverse property to false if you only want to trigger the element once. I also noticed you have a transition in your CSS. That's going to cause a fight for control between GSAP and CSS. You're also using a really old version of ScrollMagic. Here's a fork of your pen with the latest version and using the addIndicators and GSAP plugins.

 

See the Pen oGJOym by PointC (@PointC) on CodePen.

Hopefully that helps. Happy tweening.

[DD77]

thanks, really nice, but I can't understand why the first element (which is in view) in not showing. I need to scroll in order to make it fading in. Also, I'd like the 3 elements to have different (possibly) animations, so di should be within a variable

Could you help please?

[PointC]

The first element is not hitting the trigger on page load. If you want it to fire immediately, it needs to be beyond the triggerHook on page load. For different animations on each element, you can put those into an array and use the index of the jQuery each() loop to create the tween/timeline. Here's a fork that adds those options.

 

See the Pen ZXVNKq by PointC (@PointC) on CodePen.

 

Happy tweening.

 

[OSUblake]

Sorry, no demo, but you can detect when an element is in the viewport using the new Intersection Observer API. There's also a polyfill for older browsers.

[PointC]

oooooooh.... that looks cool. 

 

@OSUblake - I saw that you had replied to this thread and thought it was going to be one of your world famous "You might not need ScrollMagic..."  answers. 

 

It is getting a bit concerning that the last update to ScrollMagic was two years ago. It's still working fine for me when I need it, but I've been using some of your demos as a guide to creating some of my own functions for that type of work. The Intersection Observer API looks like it could solve a piece of the puzzle. Thanks for the link. My "Blake's Bookmarks" folder is getting pretty full. I'm going to have to put some sub-folders in there pretty soon. 

 

[OSUblake]

35 minutes ago, PointC said:

oooooooh.... that looks cool. 

 

@OSUblake - I saw that you had replied to this thread and thought it was going to be one of your world famous 'You might not need ScrollMagic...'  answers. 

 

 

Hehe. I discovered the API a couple weeks ago, so I really haven't had a chance to play with it yet. But once I do, I'll be sure to include it with any future "You might not need ScrollMagic" posts I make.

 

Here's a cool demo by @aderaaij that shows it action. It doesn't use GSAP, but it's easy to see how it could.

 

See the Pen oGwRvW by aderaaij (@aderaaij) on CodePen.

 

 

[OSUblake]

I just noticed something pretty cool. Click the "Run Pen" button, and then start scrolling the forum page. It works with nested scrolled content!

[PointC]

 

That is interesting and gives me some ideas. Time for some experiments...

[PointC]

o.k. @OSUblake, I had a couple free hours this afternoon to read through some of the docs and hack away at this new API. I don't have a complete understanding yet, but I managed to get something working. Although, it's not working in FF or Edge so I must have something messed up. Anyway, here's one with triggers for the timelines.

 

See the Pen aLxmJp by PointC (@PointC) on CodePen.

In this next one, I was trying to link the timeline progress to the scroll position. It works, but I haven't yet found a way to figure out which way I'm scrolling. The intersectionRatio changes when the element enters and leaves so it was scrolling to progress(1) and then starting going back to 0 as the element scrolls up.That's not what I wanted so I just ended up unobserving the element once the timeline reached 97%. 

 

See the Pen aLxJbZ by PointC (@PointC) on CodePen.

Arden's demo you linked to above seems to work fine in FF and Edge whereas mine only works in Chrome so I definitely have something wonky, but it's only a first attempt. I'm sure once you dive into the API, you'll be schooling all of us.

 

Edit: updated to FF 56 and now it seems to work. I thought FF 55 should have worked, but I guess not. Still not working in Edge, but maybe I need to update that too.

[OSUblake]

Looks good so far!

 

For detecting up or down scrolling, you can record the ratio and compare it.

let prevRatio = 0;
...
for (let entry of targets) {
  
  if (entry.intersectionRatio > prevRatio) {
    // going up
  } else {
    // going down
  }

  prevRatio = entry.intersectionRatio;
}

 

Now where did you learn this? I have never seen Array.prototype.entries() before. Had to look that one up.

// create timelines and start observing targets
for(let [index, element] of ar.entries()) {
  animations[index] = new TimelineMax({paused:true});
  observer.observe(element);
}

 

[PointC]

Hehe, yeah I had to look that one up. I wanted to create those empty timelines in the loop, so I originally wrote it like this with a count variable:

 

let count = 0;
for (let target of ar) {
  animations[count] = new TimelineMax({paused:true});  
  observer.observe(target);
  count++;
}

 

After staring at it for a few minutes, I remembered my new coding philosophy: WWBD (What Would Blake Do?). I figured there had to be a way to pull the index out of it so I dug around a bit and there it is. It looks a lot like a jQuery each() loop like that with the index and the element.

 

Thanks for the info on the ratio. I wondered if I would need to keep track of that value to determine scroll direction, but didn't know if you'd have something fancier up your sleeve. I'll keep hacking away at it.

 

[PointC]

Now that I think about it, I didn't even need the index, did I? I could just create the timelines and push() them into the animations array.

 

let animations = [];
// create timelines and start observing targets
for(let target of ar) {
  tl = new TimelineMax({paused:true});
  animations.push(tl);
  observer.observe(target);
}

 

Oh well, at least I learned something new.

 

 

[OSUblake]

45 minutes ago, PointC said:

Oh well, at least I learned something new.

 

Me too! 

 

2 hours ago, PointC said:

WWBD (What Would Blake Do?)

 

Haha! Love it!

 

I would probably use .map(). Whatever you return gets added to a new array.

const ar = Array.from(document.querySelectorAll(".content"));

const animations = ar.map(el => {
  observer.observe(el);
  return new TimelineMax({paused:true});
});

 

As a one-liner.

const animations = ar.map(el => (observer.observe(el), new TimelineMax({paused:true})));

 

If you have multiple things in parentheses, it will evaluate to the last one.

const num = (1,2,5); // => 5

 

Can be handy for conditional statements.

// Restarts animation and sets value to 10 if animation isn't active
const value = animation.isActive() ? 5 : (animation.restart(), 10);

 

[PointC]

That's perfect. You've talked about .map() so many times and I always let it drift to the back of my mind and never use it. I've gotta add that one to the things I use on a regular basis. 

 

[DD77]

@PointC @OSUblake
Hi Guys, that's amazing! Thanks for looking in to it so deeply. I have to say I got quite lost in here:-) My Initial goal and requirement was making my functionality working without Scrollmagic as I can't add any plugin into the project. I have to figure a way to make Gsap to work within a "inview" function.  If any of you could help me with that would be awesome.

Please have a look at my demo, https://jsfiddle.net/rsq1o1dw/ doesn't work I want

lets say that I'd like to achieve an interaction like this page does https://www.apple.com/uk/apple-watch-series-3/

[rgfx]

@PointC

 

Hi, This should work in ie11, but doesnt.  I tried adding a polyfill https://github.com/w3c/IntersectionObserver/tree/master/polyfill no dice. Arden's pen doesn't work in ie either. Perhaps the issue may not even be with IntersectionObserver. Must investigate.

 

I am already using IntersecionObserver for lazy loading and works great.  I have been using https://github.com/camwiegert/in-view for cases like these. It uses MutationObserver, works in most browsers but IntersecionObserver if far more performant. 

 

It would be nice to use this for some scrolling animations am working on. The plan to use Blakes smooth scroll parallax technique. Cause of mousewheel jank. IE still doesn't like it very much, but at least it works. Scroll magic lack of updates concerns me. There's https://github.com/homerjam/scrollwizardry but still seems like an unnecessary amount of code. I think we are close to removing scroll magic from the picture. 

 

Scrolling animations are so cool   Until the mouse wheel  What do you think, just run animations in view to be safe? Or should I boldly go into scrolling animation madness?
 

See the Pen eyOpMX by rgfx (@rgfx) on CodePen.

 

 

 

 

[OSUblake]

Not sure why the polyfill doesn't work. I didn't test it out, but it says it's compatible with IE7+.

 

Keep in mind that the script I wrote is very simple, and hasn't been battle tested, so use at your own risk. If I were to make it into a scrolling library, there's a lot more stuff I would want to add to it. Unfortunately, I currently don't have a lot of free time to devote to making a full-blown scrolling library like ScrollMagic. Well, unless somebody paid me to do it. I can always make time for that.

 

[rgfx]

I hear you,  I would have to investigate all of its features, but it seems like a few options would go a long way. 

 

1. Parallax data-attribute offset control.

2. When to start and stop animation. 

3. Some methods for controlling how scroll Y value changes a integer.

 

Going to start a Kickstarter campaign

 

However part of me doesn't want to see text spinning everywhere I go. Maybe it best we don't open the scroll magic box. 

[OSUblake]

1 hour ago, rgfx said:

However part of me doesn't want to see text spinning everywhere I go. Maybe it best we don't open the scroll magic box. 

 

Yes, DO NOT SCROLL ANIMATE ALL THE THINGS!

 

Some people take scroll animations a little too far. It needs to be subtle, like that apple watch page.

https://www.apple.com/apple-watch-series-3/

 

Performance can also be a problem with really long pages. If you inspect the elements on that apple watch page, you'll notice that they are setting the visibility of divs with the .subsection-content class to hidden when they are out of view. That can drastically improve performance.