Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jerrys

Do I need ScrollMagic to use GSAP?

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

I'm having no success trying to get any simple animation to trigger when it gets reached on a web page.  Here are some related questions:

 

1) Am I right in thinking that neither CSS, nor basic javascript, nor GSAP has an actual scroll trigger?

2) So, do I then need something like ScrollMagic?  Is that the best?
3) But it also seems I need jQuery to make ScrollMagic work.  Is that correct?

4) But if I need jQuery for ScrollMagic and ScrollMagic for GSAP, then I don't understand how anything gets me scrolling is going to be lightweight.

5) How do most GSAP folks accomplish scroll triggering?

 

Thanks!

Link to comment
Share on other sites

  1. Javascript, and therefor GSAP, do indeed have a scroll event: http://www.w3schools.com/jsref/event_onscroll.asp

  2. You do not need ScrollMagic, although it can make your life a lot easier if your project is doing a fair number of scroll triggered events

ScrollMagic does not depend on jQuery, just as GSAP does not depend on jQuery ... but they are certainly compatible.

Number three answered this, partly ... you need an animation framework to work with Scroll Magic. GSAP is the one I would choose ... but it also supports VelocityJS. In terms of scroll position based animations, think of ScrollMagic as the eyes and ears and the animation framework as the muscle.

Depends on the complexity of what needs to be triggered and when. If using jQuery, Waypoints is another option for simple triggering.

  • Like 3
Link to comment
Share on other sites

Thanks so much for the reply.

 

In the ScrollMagic 101 video number 1 on youtube (

at 5.25), they begin their main.js file with $(document).ready.(function(){....

 

I take it that is a jQuery statement.  What would I use to do it without jQuery? 

Thanks again!

Link to comment
Share on other sites

Honestly, jQuery just makes this a ton easier. If you don't want to use it, you certainly don't have to. You would have to roll your own method of detecting when the document is ready and execute from there.

Link to comment
Share on other sites

To be honest, my animations are probably going to be REALLY simple.  Just a small 10% translation to emphasize an arrow that links to another page.  I just need them to trigger once when the user scrolls down to the arrow.  I never wanted to use any javascript.  But then I found that html and css can't tell me when the user has scrolled to some point.  But now it seems like I need to take on board jQuery.  Could I somehow use velocity?  I'd really like to keep things ultra fast.  I'm a musician and the web seems really slow to me.  Every 10ms delay is noticeable to me. 

Link to comment
Share on other sites

As a fellow musician and developer, I hear that! But, in wanting to keep things ultra fast, what is that in regard to? The execution of animations? Or the delivery of assets to the browser?
 
You will have battles on both fronts because you can't control your users' environment. Some will have broadband, some will be on spotty 3G. Some will have the latest browser using a blazing javascript engine, some will be using IE.
 
In terms of animation speed and fluidity, I don't think you will find anything better than GSAP: it's built for speed. In terms of delivery of assets, I think you will find using CDNs to deliver minified code lightning fast.
 
I'm using jQuery and GSAP and loading fairly large video backgrounds on http://www.reynoldslakeoconee.com, delivered by various CDNs and I would say it's snappy.
 
In the world of development, we have to pick our battles.
 
Now, back to the question at hand .. if you only need to know when one or two elements reach the viewport ... you can use vanilla javascript to detect the element's top position compared to the window's scroll position. You would poll these two using the onscroll event, something like
 

// I'm winging this off the top of my head ... I'm sure there are issues
// But it should get you in the right direction

var elementTop = document.querySelector("#element-id").offsetTop;
window.onscroll = function() {
  if( document.body.scrollTop > elementTop || document.documentElement.scrollTop > elementTop ){
    // Do something with GSAP or you could simply
    // add a class to element you want to animate
    // and use CSS3 animations
  }
};
  • Like 2
Link to comment
Share on other sites

@Jerrys keep in mind that:

  • ScrollMagic is created with GSAP, but it is not created by GreenSock.
  • ScrollMagic uses GSAP as its animation platform. So the two are totally different.
  • ScrollMagic is just a plugin that uses GSAP to animate animations triggered by a scroll event.

GSAP is built for perfomance compared to other animation JS libraries.

GSAP is a all in one animation platform to create various types of animations, and is only limited by your imagination.

 

:)

  • Like 4
Link to comment
Share on other sites

Thanks Shaun, but I just don't have any time for something that has issues.  I'm not trying to learn javascript. 

 

I don't want to derail the thread with a big debate about speed.  The web site you linked to is very nice.  But I'd actually like something even faster.   Of course that is, as you say, a multi-front battle.  I use this a standard: https://www.bahn.com   Actually, as my site is much lighter, I'd like it to be even faster than that.

I'm just trying to find some easy way of getting high quality scroll script that works with GSAP. 

I've been pulling my hair for a couple of days now with this other possibility: http://imakewebthings.com/waypoints/

 

The syntax that figures so prominently on the page looks nothing like what figures in the few videos online.

 

I have a js file that has only these lines that I get from what we see on the website:

 

var waypoint = new Waypoint({
  element: document.getElementById('project01'),
  handler: function() {
    notify('Context example triggered')
  },
})

 

I link to it along with the noframework.waypoints.js in my HTML.

But Safari throws up the error: No element option passed to Waypoint constructor.

 

I'm at my wits end.

 

I actually know a fair bit about animation having used After Effects extensively.  But this inability to get a solid scroll bar script has stopped me dead.  Frankly, I'm rather shocked that GSAP can be so extensive and not have its own plugin for this.  I would have thought that scroll triggering would be absolutely central to web animation.

 

If can't use GSAP, then I'll just opt for animate.css + the WOW plugin. 

But I'd like to have the functionality of GSAP to EXPERIMENT with WITHOUT taking on JQUERY.

Link to comment
Share on other sites

I'm not sure what to say to this. Observationally, I would say you're new to web dev (not an insult, just a hunch based on this conversation) and have expectations above and beyond realistic outcomes ... which, of course, we all do/did when new to web dev. But there are a staggering number of variables (bandwidth, latency, # of server requests, server processes, server memory, browser capability, asset optimization, asset ordering, asynchronous calls, ... the list goes on and on) that do indeed get in the way of what someone can perceive as fast, fast enough, or even acceptable. Finding strategies to overcome any number of these variables are quite literally the full time job of some industry leaders.
 
In one breath, looking for a solution that is in fact only available via Javascript (scroll position triggering) and in another stating, "I'm not trying to learn javascript" doesn't leave much room for possibility here.
 
The philosophy of web libraries (in general) is very much the same as OSS as a whole; do one thing and do it well. GSAP is an animation and sequencing framework and it kicks ass at that. Triggering those -- whether the event is click, hover, keypress, timeout, scroll, whatever -- is the job of the developer. All of these events can be handled with vanilla JS and that certainly would provide minimal code. But then you get into browser workarounds and such ... and tools like jQuery make event binding very simple. There is a trade off; you are loading a library for which you might not need most of what it offers, for sure. But a minified GZIPped jQuery 3 weighing in at 29kb will certainly not be the deciding factor in page load speed. And using solely as a selector and event binding tool is worth the 29kb alone.

 

A codepen of what you're working with would greatly help to solve this problem.

  • Like 5
Link to comment
Share on other sites

There isn't really much to put in a codepen.  Most of it would just be that snippet.  I just can't determine whether that is sufficent for a .js file or whether it needs more around it.  Safari doesn't like it.  But that's all the guy has on his web page.

 

T.S. Elliot said: Only those who will risk going too far can possibly find out how far one can go.

Link to comment
Share on other sites

Hello Jerrys,

 

i think there is some confusion. It looks like your questions are relating to the ScrollMagic API and its use, which GreenSock does not support.

 

ScrollMagic was created by Jan Paepke, not by GreenSock.

 

https://github.com/janpaepke/ScrollMagic

 

Have you looked at the ScrollMagic Documentation?

 

http://scrollmagic.io/docs/index.html

 

Have you tried asking for support on the ScrollMagic support page?

 

https://github.com/janpaepke/ScrollMagic/issues

 

You can also try and check out GreenSock moderator Petr Tichy's website that shows you how to use ScrollMagic with GSAP

 

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

 

You can also look at the GSAP ScrollToPlugin Docs:

 

http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

 

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

 

In this forum we have to stay focused on questions relating to the GSAP API.

 

But we are more than willing to help you with any specific GSAP questions!

 

Happy Tweening :)

  • Like 6
Link to comment
Share on other sites

No worries.  I'll find some other bench to sleep on...

But yes, I checked out all those links I'm pretty sure.  But I'll check again.

Link to comment
Share on other sites

"Safari doesn't like it."

I'm afraid I don't know what you mean by this. Are you asking/stating if/that Safari isn't enough to do this on its own? The answer is yes (any browser is), but it will need instruction from javascript.
 
"But that's all the guy has on his web page."

 

Is there a URL to reference here?

Link to comment
Share on other sites

Yes Shaun.  I linked to before I introduced the snippet.

Link to comment
Share on other sites

I just scrolled back through all the comments and don't see a URL for the problem at hand ... only a URL for a speed comparison. I don't see anything that I can code inspect to point you in the right direction.

Link to comment
Share on other sites

Oh, no ... sorry. I should be more clear. I meant a URL to the site you are working on where this is presenting a problem.

Link to comment
Share on other sites

All I want is to use waypoints to trigger an alert when I scroll and get to a div with id=project01.  I am using the the non-jQuery version, ie the no frameworks version of waypoints.  I will iink to the no frameworks version of waypoints in my HTML with script tags.  I will also link to a main.js file.  The main.js file at the moment only has that snippet.  It does not work.  All I need is the entire main.js file that will trigger an alert.  Once I have that, I will animate better than Looney Tunes and I will do it all with GSAP.  I will be heralded and win many prizes and do GSAP proud.

Link to comment
Share on other sites

I put together something quickly for your reference. Other than including GSAP in this codepen (which it sounds like you want to do), I've used basic Javascript (no jQuery, no WayPoints, no ScrollMagic). Have a look. 

 

See the Pen OXBpzg?editors=0010 by sgorneau (@sgorneau) on CodePen

  • Like 4
Link to comment
Share on other sites

Thanks!  Let me see!  Fingers crossed! 

Link to comment
Share on other sites

Thanks Shaun!  That'll certainly get me started.  Will that work on all the browsers?  Do you have a donate button somewhere?  I want to send you a six-pack!

 

Link to comment
Share on other sites

Great discussion, guys.

 

Shaun and Jonathan have pretty much said exactly what I would have said and more. 

 

Jerrys,

 

Welcome to the GreenSock forums. Since Shaun is so on target with explaining various options, I just want to address one of your questions:

 

Why doesn't GreenSock make a tool for triggering animations when elements are visible in viewport

 

We've thought about it a bit, and the short answer is that animation is our primary focus and tools like ScrollMagic and Waypoints have already solved the problem.

 

Through reading through this thread, it seems like the non-jQuery version of waypoints would be a great option

 

EDIT: I now see Shaun's demo looks perfect as well.

  • Like 4
Link to comment
Share on other sites

Will that work on all the browsers?

 

That is the question of a lifetime! The short answer: no. The longer answer: yes, all modern browsers and most going back a good number of versions. Even IE back to 8. If ever in doubt, have a look here

 

http://caniuse.com/#feat=queryselector

 

No need for a donation ... most developers hold onto the OSS philosophy; give back. Whether that's code, documentation, or support. Happy to help.

  • Like 1
Link to comment
Share on other sites

How about iPads?  I read something recently that made me think that scroll runs into problems in iPads.  I even went to amazon to look at the book for velocity.js and around p. 135 they mention scroll and touchpads and say that a full discussion is beyond the scope of the book! 

 

Well, it's not as bad as reading font contracts.  No forums with guys like Shaun to help a grasshopper out there.

 

Carl, everytime I post, I have to identify mountains or trees.  :(

Link to comment
Share on other sites

Jerrys, sorry about the captcha stuff. I suspect since you are new and your post frequency is very high today you triggered some spam-bot alerts. If it persists after this thread calms down just let me know.

 

It was super of Shaun to provide a short, light-weight code snippet, but I wouldn't expect him to verify all the places it works and doesn't.  For that type of assurance I would really recommend one of previously mentioned libraries that are thoroughly tested and supported by their respective authors.

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.
×