Fullpage.js with GSAP - Callback afterLoad animation - javascript

I am trying to add some animations to fullpage.js with GSAP and have a question regarding the afterLoad function. Here's my code (with codepen link included)
$("#wrapper").fullpage({
verticalCentered:true,
scrollingSpeed: 1000,
sectionSelector: "section",
afterLoad: function(anchorLink, index) {
var loadedSection = $(this);
if (index == 2) {
TweenMax.from(".second h1", 1, {opacity:0, left:"-20px"});
}
}
});
What I would like to do is, use the afterLoad function to animate (fadeIn / slideIn) elements of the current section. My codepen link is here.
I am able to do this successfully (pls see the second section of the pen, you'll see it fades in), but the problem is it doesn't start with the animation. It has a delay before the animation starts, so during that delay, the elements need to be hidden (Not sure how to do this, I tried visibility:hidden to start with, it didn't work).
I am able to achieve the same thing with onLeave (but from 2nd section onwards).
Looking forward! Cheers!
UPDATE
I managed to figure it out. Thanks for Alvaro for chipping in a prompt reply. Here's the updated code:
$("#wrapper").fullpage({
verticalCentered:true,
scrollingSpeed: 1000,
sectionSelector: "section",
afterLoad: function(anchorLink, index) {
var loadedSection = $(this);
if (index == 1) {
$(".second h1").hide();
}
if (index == 2) {
$(".second h1").show();
TweenMax.from(".second h1", 1, {opacity:0, left:"-20px", delay:0.5});
}
}
});

Related

Repeat JS Textillate function each time modal is opened

I am using uikit modal on a project. I am also using JS Textillate to animate the text when the modal is opened. However, I want the text to be animated if the modal is closed and opened again continuously. For now, it only animate once when the modal is opened for the first time, when closed and opened again, the animation does not run again.
This is the JavaScript code below:
$(".uk-modal-full").on('show', function(){
var $title = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
var $title = $(".txt2").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
});
I am thinking maybe the function can be removed when modal closes so that it can be repeated when it is opened again. I am not sure if that is possible as I am only a Jquery learner.
$(".uk-modal-full").on('hide', function(){
// code here?
});
Full options for Textillate is here https://github.com/jschr/textillate
UPDATE
Thank you! I have created a codepen here to test my full code inside a modal using your example. It seems to be working but with some issues. When I use $element.textillate('in') and $element.textillate('out'), the other options do not work (e.g. initialDelay). It seems to only control the "in" and "out" options. When I used $element.textillate('start') and $element.textillate('stop'), the other options worked but when modal is reopened, the text are briefly loaded first before animating.
Please see codepen here - https://codepen.io/ajaxthemestudios/pen/XWJRBbW
Looking through the readme of Textillate, I think this section is what you need:
$element.textillate('start') - Manually start/restart textillate
$element.textillate('stop') - Manually pause/stop textillate
$element.textillate('in') - Trigger the current text's in animation
$element.textillate('out') - Trigger the current text's out animation
So I would do something like first define the animations (outside the event functions)
var title1 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
var title2 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
And then in the event function:
$(".uk-modal-full").on('show', function(){
title1.textillate('in');
title2.textillate('in');
}
EDIT
I got it to work in this codepen: https://codepen.io/thomas-short/pen/zYxdzWY
Test it by clicking on click repeatedly.
EDIT 2
The problem of the text being briefly visible seems to be a limitation of the library. I could not find a way to solve it using the tools they provide. The only way I managed to make it work is by control it myself:
$(".uk-modal-full").on('show', function(){
title1.textillate('start');
$(".txt2").hide();
setTimeout(() => {
$(".txt2").show();
title2.textillate('start');
}, 1500);
})
And remove initialDelay from the options

multiple instances of fullpage.js

I am trying to use fullpage.js for two different sections on one website. Basically, when a slide is clicked on, it reveals a child wrapper div underneath with its own sections to vertically scroll through before the main section continues on.
Here is my code that I am working with. I'm trying to load it in through ajax but I'm wondering if there is an easier way I am overlooking.
$("#wrapper").fullpage({
verticalCentered: true,
resize : true,
anchors: ['section1', 'section2', 'section3', 'about'],
//menu:'#menu',
customScroll:true,
onLeave: function(index, nextIndex, direction){
//console.log(index+'|'+nextIndex+'|'+direction);
if (direction == 'down'){
$('.section:nth-child('+index+')').animate({'top':'0%'},0)
$('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
} else {
$('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
$('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
}
}
});
and then the code that removes it and adds a new wrapper:
$(".sub_section").click(function() {
$("#wrapper").fullpage.destroy('all');
if (sub_section_open == false) {
$("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
$("#right_border").animate({"borderRightWidth" : "0px"}, 300);
$("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
$("#left_border").hide();
$("#right_border").hide();
$("#top_border").hide();
});
$(".sub_section .letters").slideUp("slow", function(){
$(".sub_section .content").css({'z-index': 1});
});
sub_section_open = true;
$(".btn_sub_section_close").show();
$( "#wrapper" ).load( "section1.html" );
$("#section1").fullpage({
verticalCentered: true,
resize : true,
anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
menu:'#menu'
});
}
});
Any ideas? Thanks!
fullpage.js only supports one instance.
It is a fullpage plugin and it is not made to support them as it doesn't make sense. It is full page, all the page will be part of one instance of fullpage.
You can easily see evidences of it in the code, for example in this line:
$('.fp-section').each(function(index){
Any section on the page, no matter which container/wrapper it uses, will be treated inside one single instance of fullpage.
On GitHub, Fullpage.js has labeled the issue as enhancement. So there is a chance we get the multiple instances option in a future version :)

animation execute before direction up

I using plugin one pagescroll fullpage.js.
How to use animation before direction up.
onLeave: function(index, nextIndex, direction){
if (index == 4 && direction == 'up'){
$('.nave-space').tween({ left:{
start: 100,
stop: 200,
time: 0,
units: 'px',
duration: 5,
// effect:'bounceOut' },
backgroundSize:{
start: '10% 10%',
stop: '100% 100%',
time: 0,
duration: 10,
effect:'easeInOut',
}
}); $.play();
}
}
I need help.
What you are looking for is how to chain multiple animations one after the other. I am not sure about the specifics about this plugin but generally the idea is that you can queue animations() or you can add one animation in the complete function of another animation.
You can find more about this here:
jQuery .animate()
Multiple sequence of animations
It is not possible right now.
There's an open issue about it in the github repository of the plugin.
It would require an beforeLeave callback.

Issue with jquery fadein

I have a piece of code here which it works but not sure why my fadein and fadeout doesn't work for the body,
If you think what the issue i'm having please let me know thanks
<script type="text/javascript">
$(window).load(function() {
var lastSlide = "";
$('#slider').nivoSlider({
effect: 'random',
directionNavHide : true,
slices : 15,
animSpeed : 500,
pauseTime : 6000,
controlNav : false,
pauseOnHover : true,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){
if(lastSlide == "images/header_used.jpg") { //use the bg image of the slide that comes before the newslide
$("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");
} else {
$("body").attr("style","background: #ADADAD url(images/bgnd_grad.jpg) repeat-x;").fadeOut("slow");
}
},
afterChange: function() {
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src");
}
});
});
</script>
While it may solve your mission with the body background. i would instead have used addClass and removeClass. You are manipulating the style attribute which also show/hide uses it.
I have no way to test it but what happens if you switch the fades to show() and hide(), just to determine if delay is a factor.. :)
It my come by the fact that "lastSlide" variable could store multiple object (the one from img and the one from visible link).
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src"); //could store multiple source.
This make comparation a little bit tricker and could create bug.
Plus the fact that you use the worst way to style your body. As other says, use class or .css jQuery function (http://api.jquery.com/css/).
Hope this help
fadein and fadeout work for body,absolutely.
as Reflective said, it should be
$("body").css("background","#000 url(images/bg.jpg) top center no-repeat;").fadeOut("slow")
if still doesn't work, you may should look into your nivoSlider function

jquery menu slides in and bounces

http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/

Categories