Jump to content
Search Community

jquery trigger GSAP function if element is in viewport

DD77 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

:)

 

  • Like 5
Link to comment
Share on other sites

oooooooh.... that looks cool. B)

 

@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. :D

 

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. 

:)

 

  • Haha 1
Link to comment
Share on other sites

35 minutes ago, PointC said:

oooooooh.... that looks cool. B)

 

@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. :D

 

 

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

 

 

  • Like 4
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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);
}

 

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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. :)

 

 

Link to comment
Share on other sites

45 minutes ago, PointC said:

Oh well, at least I learned something new. :)

 

Me too! :-D

 

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);

 

  • Like 3
Link to comment
Share on other sites

@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/

Link to comment
Share on other sites

  • 1 month later...

@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

 

 

 

 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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. 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...