I am trying to setup multiple gsap scroll triggers with lottie animations in 3 sections. I would like the screen to pin to the animations until they complete. This is the code I currently have, which seems to mostly work. I randomly will see issues where section scroll weird or animations don't finish completely. Any help would be greatly appreciated.
<section class="section--01 section--side-by-side">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell medium-6">
<h2>Title</h2>
<p>Description</p>
</div>
<div class="cell medium-6 side-by-side-wrapper">
<div id="section-lottie--01">
<div class="lottie-container"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section--02">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell small-12 medium-6">
<h2 class="text-center">Title</h2>
<div id="section-lottie--02">
<div class="lottie-container"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section--03 section--side-by-side">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell medium-6">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="cell medium-6">
<h3>Subtitle</h3>
<div id="section-lottie--03">
<div class="lottie-container"></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
<script>
$(document).ready(function () {
let mobile = window.innerWidth < 749;
gsap.registerPlugin(ScrollTrigger);
LottieScrollTrigger({
target: "#section-lottie--01 .lottie-container",
trigger: ".section--01",
path:'/jobseeker-bar-chart.json',
speed: "medium",
pin: ".section--01",
scrub: 1,
start: mobile ? "center 45%" : "center center"
});
LottieScrollTrigger({
target: "#section-lottie--02 .lottie-container",
trigger: ".section--02",
path:'/salary-bar-chart.json',
speed: "medium",
pin: ".section--02",
scrub: 1,
start: "center 75%"
});
LottieScrollTrigger({
target: "#section-lottie--03 .lottie-container",
trigger: ".section--03",
path:'/salary-scatter-chart.json',
speed: "medium",
pin: ".section--03",
scrub: 1,
start: mobile ? "center 45%" : "center 55%"
});
function LottieScrollTrigger(vars) {
let playhead = {frame: 0},
speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
target = gsap.utils.toArray(vars.target)[0]
st = {trigger: target, pin: true, start: "center center", end: speeds[vars.speed] || "+=1000", scrub: 1},
animation = lottie.loadAnimation({
container: target,
renderer: vars.renderer || "svg",
loop: false,
autoplay: false,
path: vars.path
});
for (let p in vars) { // let users override the ScrollTrigger defaults
st[p] = vars[p];
}
animation.addEventListener("DOMLoaded", function () {
gsap.to(playhead, {
frame: animation.totalFrames - 1,
ease: "none",
onUpdate: () => animation.goToAndStop(playhead.frame, true),
scrollTrigger: st
});
});
}
});
</script>
It seems that I get different results when I refresh the page. Randomly the page will jump to the next section while scrolling through an animation.
maybe you have multiple scroll triggers, make sure the order of the scroll triggers that they are not conflicting with each other.
also possible that there are issues with the Lottie animations themselves
Related
I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?
Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
Unfortunately, it is not working.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
My setup is the following:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
Any idea what am I doing wrong here?
There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)
Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
Toggle the aos-animate class with fullpage.js callbacks
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
Example HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
is it possible to change an image dependent on the current slide in owl carousel?
I know that there are events within owl carousel but I didn't found what I wanted.
Thanks in advance to everyone who takes the time to answer the questions.
Screenshot
HTML:
<div class="row">
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<img src="image1.png"/> <!-- change to image2.png if slide 2 is active -->
</div>
</div>
<div class="owl-carousel-team">
<div class="col-lg-9 col-md-12 item">
<h3>Slide 1</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
<div class="col-lg-9 col-md-12 item">
<h3>Slide 2</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
</div>
Javascript:
var teamCarousel = function(){
var owl = $('.owl-carousel-team');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight()
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
teamCarousel();
});
You can detect your slide movement by
owl.on('translated.owl.carousel', function(event) {
// Your code here
})
use translated.owl.carousel for after slider moved
Give an id to your image tag, then get the active slider image source and set to <img/>
e.g.
owl.on('translated.owl.carousel', function(event) {
var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src');
$('#you_img_id').attr('src', now_src);
})
Here's the demo https://jsfiddle.net/566j4jsf/
While running this HTML
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div id="container1">
<div class="dropEL col-6">
<p>Element 1</p>
</div>
<div class="dropEL col-6">
<p>Element 2</p>
</div>
</div>
</div>
<div class="col">
<div id="container2"></div>
</div>
</div>
</div>
</div>
</div>
and this JS
var currentParent;
$(".dropEL").draggable({
containment: "#container2",
grid: [ 20, 40 ],
snap: true,
start: function(){
currentParent = $(this).parent().attr('id');
}
});
$('#container1, #container2').droppable({
accept:'.dropEL',
drop: function(event,ui) {
if (currentParent != $(this).attr('id')) {
$(ui.draggable).appendTo($(this)).removeAttr('style');
}
$(this).find("div").on("click", function(e){
e.stopImmediatePropagation();
if($(this).hasClass("col-6")) {
$(this).find("p").css("background-color", "red");
$(this).removeClass("col-6").addClass("col");
} else {
$(this).find("p").css("background-color", "green");
$(this).removeClass("col").addClass("col-6");
}
});
}
});
I am able to drag and drop from container 1 to container 2 but i cannot drag and drop back to container 1. How could I?
CodePen here
Just change code as below
$(".dropEL").draggable({
containment: ".container",
grid: [ 20, 40 ],
snap: true,
start: function(){
currentParent = $(this).parent().attr('id');
}
});
you mentioned containment as #container2 that is the root cause.
Please find the Updated Code Pen:https://codepen.io/anon/pen/wqLvQB
in latest owlCarousel v 2.0.0 , I want to slide all items visible in viewport, clicking on prev/next buttons like the dots nav do . However I want the same functionality in prev/next button while loop value is true. I have created a pen : Codepen Please look into. Anyhelp using available option will be great help.
HTML:
<div class="owl-carousel">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
})
slideBy option in owl carosel is handy. It solves the issues.
Included it as follows.
Updated JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1,
slideBy: 1
},
600: {
items: 2,
slideBy: 2
},
1000: {
items: 5,
slideBy: 5
}
}
})