Jump to content
GreenSock

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

Delay the animation until user scrolls to the element

Recommended Posts

I'm using Fullpage.js and I have animated the elements of each section to fade in.

The animations work awesomely well but the ones from the lower sections run offscreen and when the user scrolls to the section the elements are static. I need the animations of a specific section to commence when the user scrolls to that section.

Any way i can achieve this?

 

Thanks in advance!
:)

Link to post
Share on other sites

Step 1: attach a "scroll" event to the document

Step 2: when the event is fired, check window.scrollY. If it aligns with one of the sections, proceed to step 3

Step 3: fire desired animation(s)

Link to post
Share on other sites

Are you using the callbacks fullpage.js supplies. If not refer to the documentation there are callbacks supplied where you place events that you want to trigger linked to scrolling through sections and slides.

 

If you are using the callbacks make sure you are using adequate specificity in your selectors to make sure that your scripts are running on items only contained within the slide/section you are targeting. ie if you simply select items on the dom the scripts will run your animation the first time or every time you scroll and the callbacks are invoked, regardless of whether the items are in the section you are scrolled to, selectors have to target the section you are in and the dom element you want to fire the event on.

Link to post
Share on other sites

Are you using the callbacks fullpage.js supplies. If not refer to the documentation there are callbacks supplied where you place events that you want to trigger linked to scrolling through sections and slides.

 

If you are using the callbacks make sure you are using adequate specificity in your selectors to make sure that your scripts are running on items only contained within the slide/section you are targeting. ie if you simply select items on the dom the scripts will run your animation the first time or every time you scroll and the callbacks are invoked, regardless of whether the items are in the section you are scrolled to, selectors have to target the section you are in and the dom element you want to fire the event on.

fullpage.js only gives sections, it doesn't do anything as far as callbacks.

Link to post
Share on other sites

If you really want intricate scroll-control of your animations. ScrollMagic is the way to go.

Petr Tichy has some great intro tutorials / templates: https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/?ref=5

 

He also just released a premium series too which I'm sure is top-notch. The majority of award winning sites that have scroll-driven animations use ScrollMagic with GSAP. Definitely worth checking out.

  • Like 1
Link to post
Share on other sites

fullpage.js only gives sections, it doesn't do anything as far as callbacks.

 

Of course it does, why do you think I suggested it. I use it to fire Jquery animations, right now I'm transitioning some of those animations to GSAP.

 

Refer to the documentation: https://github.com/alvarotrigo/fullPage.js#fullpagejs

 

It's under the section called Callbacks.

Link to post
Share on other sites

If you really want intricate scroll-control of your animations. ScrollMagic is the way to go.

Petr Tichy has some great intro tutorials / templates: https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/?ref=5

 

He also just released a premium series too which I'm sure is top-notch. The majority of award winning sites that have scroll-driven animations use ScrollMagic with GSAP. Definitely worth checking out.

 

Scroll magic is great... it's a different animal from full page though. For simple slide to slide moves full page works great and is very easy to use. Of course the complexity ramps up considerably if you want to use callbacks for firing animation. Depends on what you are trying to achieve.

Link to post
Share on other sites

Here's an example of a function for running animation on FullPage section load. Note this is only the function you need to call the function inside the callback.

jQuery.animateOnSectionLoad = function (){
      var activeSection = $('.section.active');
          $( ".animation-element",activeSection).each(function(){
              var animationTarget = $(this);
              //run your gsap animation on  animationTarget variable
              // assumes of course you have class animation-element on tag being animated
              });
}; 
Appended post to show callback with FullPage initialization
$(document).ready(function() {
$('#fullpage').fullpage({
        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){
             // function inserted in callback
             $.animateOnSectionLoad();},
        afterRender: function(){},
        afterResize: function(}{},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, 
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});

Notice there are also many other callback options for Full Page.

 

Would be a good idea to reference FullPage in title of this post so people know that is what it's in reference to.

  • Like 1
Link to post
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.

×