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
Related
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});
}
}
});
I have a requirement to create a dragable free-scrolling carousel, which I can do with the likes of http://flickity.metafizzy.co/ or http://idangero.us/swiper/. However neither of these allow me to specify an initial movement. Is it possible to simulate a click-drag on these carousels to 'give them a spin'?
Something like:
$('.home-map-wrapper').trigger('mousedown').trigger('mousemove', { clientX: 0, clientY: 0 }).trigger('mousemove', { clientX: 10, clientY: 0 });
Update 1
I've created a fiddle with Flickety to demonstrate. How do I give this an initial movement?
https://jsfiddle.net/sprintstar/b34w9uec/
Update 2
I want it to move initially like you've grabbed it and given it a gentle spin. But I don't want it to auto advance, like with 'autoPlay'. Unfortunately Flickerty offers no such configuration.
You do not have to use events to launch your carousel using flickity,
You can simply:
Retrieve your Flickity instance
Specify a velocity for your carousel
Specify that you are in freeScrolling mode (and not scrolling toward a specific position)
Launch animation
Code
function initFlickety() {
var flickityElement = $('.home-map-wrapper').flickity({
freeScroll: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
freeScrollFriction: 0.00
});
var flickity = flickityElement.data("flickity"); // [1]
flickity.velocity = -1; // [2]
flickity.isFreeScrolling = true; // [3]
flickity.startAnimation(); // [4]
}
Fiddle
https://jsfiddle.net/b34w9uec/6/
If I understood correctly you want to have an initial movement on load.
I have tried setting autoPlay to a specific value on plugin initialization like this:
$('.home-map-wrapper').flickity({
autoPlay: 1000,
freeScroll: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
freeScrollFriction: 0.00
});
Check this Fiddle
Im having a bit of trouble of getting a Royal Slider working in a lightbox - If you take a look at this page: http://www.wearewebstars.dk/frontend/Test/boerneunivers2.html - And then click the arrow, where it says "Hvad er Myanmar" - Then it opens a lightbox with a gallery - However, the container of thumbnails only get a width of 36px - But the if I resize the window, then it gets the full width of all the thumbnails, and places the thumbnails correctly - Any ideas? I've tried resizing the window programmaticly, but cant get it to work:
The script I have is:
$(".toggle-gallery-8").on("click", function(event){
$('#gallery-8').royalSlider({
fullscreen: {
enabled: true,
nativeFS: true
},
controlNavigation: 'thumbnails',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 850,
loop: false,
imageScaleMode: 'fill',
navigateByClick: true,
numImagesToPreload:5,
arrowsNav:true,
arrowsNavAutoHide: true,
arrowsNavHideOnTouch: true,
keyboardNavEnabled: true,
usePreloader: true,
fadeinLoadedSlide: true,
globalCaption: true,
globalCaptionInside: false,
updateSliderSize: true,
thumbs: {
appendSpan: false,
firstMargin: true,
}
});
$('#gallery-8').royalSlider('updateSliderSize', true);
/*if($(".window.fade.in").length() > 0){
$(".window").trigger("resize");
}*/
});
Looking on the developer site I found that it's a known issue that sometimes happens.
If slider size is dynamic: try to resize your browser, if after
resizing layout looks correctly - this is the issue.
If slider size is static: change size of root slider element via
Chrome Web Inspector or Firebug and resize browser window. Or just run
jQuery('.royalSlider').royalSlider('updateSliderSize', true); in
console and see if it fixes your problem.
Doc: http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks
You can try to call updateSliderSize method:
setTimeout(function () {
$('.royalSlider').royalSlider('updateSliderSize', true);
}, 500)
after the slider definition, the setTimeout is needed to handle a little timing issue.
I'm using some jQuery to create 3 boxes that on hover, slide up to reveal more content. My two questions are:
1) How can I tweak it so only hovering on the gray box actually activates the slide instead of the entire invisible area above the gray box?
2) Is there a better way to accomplish this? I'm a beginner when it comes to JavaScript and hacked a few things I found in Google searches together. For example, it'd be nice for the height to be generated automatically based on the content instead of relying on a fixed height.
http://jsfiddle.net/kUjax/
$(document).ready(function(){
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'120px'},{queue:false,duration:150});
}, function() {
$(".cover", this).stop().animate({top:'210px'},{queue:false,duration:150});
});
});
You almost did it yourself:
$(document).ready(function () {
$('.boxgrid .boxcaption').hover(function () {
$(this).stop().animate({top: '120px'}, {
queue: false,
duration: 150
});
}, function () {
$(this).stop().animate({top: '210px'}, {
queue: false,
duration: 150
});
});
});
http://jsfiddle.net/kUjax/1/
I am using the jQuery plugin for Nivo Slider and need to find a way to stop it from transitioning when only one image exists.
Can you set the option:
manualAdvance: true
Will that help? This is the documentation for the latest NivoSlider update.
If this wont help, can you post the code you are using to enable the slider?
This will be the full code:
$(window).load(function() {
$('#slider').nivoSlider({
slices: 1, // For slice animations
startSlide: 0, // Set starting Slide (0 index)
manualAdvance: true, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
There is probably a better way to do it but it works for me:
if($('#slider img').length == 1) {
$('#slider').nivoSlider({});
$('.nivo-controlNav').css('display', 'none');
$('.nivo-directionNav').css('display', 'none');
$('#slider').data('nivo:vars').stop = true;
} else {
$('#slider').nivoSlider({
effect: 'slideInLeft'
});
}
PS. It's important to check the number of images before initializing Nivoslider because it seems to duplicate image tags...
None of the answers quite worked for me, because I still wanted a single image to display with a caption. I ended up using slightly different options to initialise the nivoSlider depending on the number of images (my images were in a containing div with the id 'hero-images'):
var numImages = $('#hero-images img').length;
if (numImages === 0) {
//No images - hide the block
$('#hero-images').hide();
} else if (numImages === 1) {
// 1 image - disable controls and set to manual advance to prevent animation
$('#hero-images').nivoSlider({
directionNav: false,
manualAdvance: true,
controlNav: false
});
} else {
// Multiple images, set up as normal
$('#hero-images').nivoSlider({
effect: 'fade',
directionNav: false
});
}