CODEWITHSUNDEEP
javascriptcssanimationfullpage.js
user3358714
user3358714

Reputation: 129

CSS3 Animation within Fullpage.js

I'm trying to get a CSS3 'animate on scroll transition/animation to work within some containers using fullpage.js.

Animate on scroll: http://www.cssscript.com/demo/animate-elements-scroll-aos/

Fullpage.js: http://alvarotrigo.com/fullPage/

I can get the animation working on it's own but when with the fullpage.js, adding 'data-aos="fade-up' to determine what to animate leaves the space for the image the transition is applied to but no image is displayed; so for all I know the transition could still be happening but having it in this instance means I can't see what's being animated lol.

Looking at the code below could anybody tell if there is something immediately obvious?

<link rel="stylesheet" href="css/aos.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine'
});
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
            sectionsColor: [],
            scrollOverflow: true
        });
    });
</script>
</head>
<body>
</head>
<body>
<div id="fullpage">
<div class="section " data-color="black">
<img  class="shadow" width="50%" src="work/del-1.jpg" alt="Deloitte"  data-
aos="fade-up"></img>
</div>
<div class="section" data-color="green">
<h2>Green panel</h2>
</div>
<div class="section" data-color="blue"><h2>Blue panel</h2></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-cc1.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-cc2.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-help1.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-help2.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="yellow">
<h2>Yellow panel</h2>
</div>
<div class="section" data-color="orange">
<h2>Orange panel</h2>
</div>
</div>
</body>

Upvotes: 1

Views: 2311

Answers (2)

Tanasos
Tanasos

Reputation: 4098

I think what you need to bypass this, is to use the fp-normal-scroll class on that specific section that has the lazy-load-like plugin you've specified. However, this is not publicly released and might cause some issues (but I, myself haven't ran into one yet).

This is how you will be able to scroll and see what animates and what not.

Then, you will need to add the hybrid: true option to your init as so:

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
        sectionsColor: [],
        scrollOverflow: true,
        hybrid: true
    });
});

Here is a demo for this method.

Upvotes: 1

Alvaro
Alvaro

Reputation: 41595

You can make use of the option scrollBar:true so you can keep the auto scrolling behaviour but keep the scroll bar visible. Check the example online.

This way the page will still fire the scroll event.

In any case, I would encourage you to make use of fullPage.js callbacks to add or remove classes, that's the better way of doing it.

Also, check this video tutorial that uses the state classes added by fullpage.js to create css3 animations.

Upvotes: 1

Related Questions