Link to wanted behavior (slide on scroll): http://scrollmagic.io/examples/advanced/section_slides_manual.html
I copied the source from the site but am having trouble reciprocating it's behavior. I know there are some css that is moving from the source but it seems to be more of a javascript issue that I can't figure out.
Fiddle Link: https://jsfiddle.net/zcgxxj44/
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideContainer", 0.5, {z: -150}) // move back in 3D space
.to("#slideContainer", 1, {x: "-25%"}) // move in to first panel
.to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space
// animate to third panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-50%"})
.to("#slideContainer", 0.5, {z: 0})
// animate to forth panel
.to("#slideContainer", 0.5, {z: -150, delay: 1})
.to("#slideContainer", 1, {x: "-75%"})
.to("#slideContainer", 0.5, {z: 0});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "500%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
.addTo(controller);
});
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
position:relative;
}
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
}
#slideContainer {
width: 400%; /* to contain 4 panels, each with 100% of window width */
height: 500px;
background:red;
}
.panel {
height: 100%;
width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
float: left;
background:blue;
}
.hola{
background:green;
height:120vw;
width:100vw;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/jquery.gsap.min.js"></script>
<div class="hola"></div>
<div id="pinContainer">
<div id="slideContainer">
<section class="panel blue">
<b>ONE</b>
</section>
<section class="panel turqoise">
<b>TWO</b>
</section>
<section class="panel green">
<b>THREE</b>
</section>
<section class="panel bordeaux">
<b>FOUR</b>
</section>
</div>
</div>
Below is the working example of the same.
$(function() { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideContainer", 0.5, {
z: -150
}) // move back in 3D space
.to("#slideContainer", 1, {
x: "-25%"
}) // move in to first panel
.to("#slideContainer", 0.5, {
z: 0
}) // move back to origin in 3D space
// animate to third panel
.to("#slideContainer", 0.5, {
z: -150,
delay: 1
})
.to("#slideContainer", 1, {
x: "-50%"
})
.to("#slideContainer", 0.5, {
z: 0
})
// animate to forth panel
.to("#slideContainer", 0.5, {
z: -150,
delay: 1
})
.to("#slideContainer", 1, {
x: "-75%"
})
.to("#slideContainer", 0.5, {
z: 0
});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "500%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
});
<link href="http://scrollmagic.io/css/examples.css" rel="stylesheet" />
<link href="http://scrollmagic.io/css/style.css" rel="stylesheet" />
<link href="http://scrollmagic.io/css/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://scrollmagic.io/js/examples.js"></script>
<script src="http://scrollmagic.io/js/lib/modernizr.custom.min.js"></script>
<script src="http://scrollmagic.io/js/lib/highlight.pack.js"></script>
<script src="http://scrollmagic.io/js/examples.js"></script>
<script src="http://scrollmagic.io/js/lib/greensock/TweenMax.min.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
<div id="content-wrapper">
<div id="example-wrapper">
<div class="scrollContent">
<section class="demo" id="section-slides">
<style type="text/css">
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
#slideContainer {
width: 400%;
/* to contain 4 panels, each with 100% of window width */
height: 100%;
}
.panel {
height: 100%;
width: 25%;
/* relative to parent -> 25% of 400% = 100% of window width */
float: left;
}
</style>
<div id="pinContainer">
<div id="slideContainer">
<section class="panel blue">
<b>ONE</b>
</section>
<section class="panel turqoise">
<b>TWO</b>
</section>
<section class="panel green">
<b>THREE</b>
</section>
<section class="panel bordeaux">
<b>FOUR</b>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
Related
I am building a Swiper carousel (triggered by mouse scrolling) that has a frame on the top of it. this is the design
the red color is the frame that should cover the carousel. the middle hole is transparent
I have tried to make the red image as a mask-image so that I can control the swiper carousel by mouse scrolling, but the center hole goes white and the red color is transparent! and what I want is exactly the opposite I want the hole transplant and the outside the hole the red color.
Is there any way to add the image frame on the top of the swiper carousel and still can trigger and control the carousel positioned under the frame?
Code:
codePen
// https://swiperjs.com/
// ===================== -->
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed: 1200,
grabCursor: true,
mousewheel: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChangeTransitionStart: function() {
// Slide captions
var swiper = this;
setTimeout(function() {
var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
}, 500);
gsap.to($(".current-title"), 0.4, {
autoAlpha: 0,
y: -40,
ease: Power1.easeIn
});
gsap.to($(".current-subtitle"), 0.4, {
autoAlpha: 0,
y: -40,
delay: 0.15,
ease: Power1.easeIn
});
},
slideChangeTransitionEnd: function() {
// Slide captions
var swiper = this;
var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
gsap.from($(".current-title"), 0.4, {
autoAlpha: 0,
y: 40,
ease: Power1.easeOut
});
gsap.from($(".current-subtitle"), 0.4, {
autoAlpha: 0,
y: 40,
delay: 0.15,
ease: Power1.easeOut
});
}
}
});
// Slide captions
var currentTitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-title");
var currentSubtitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
body {
margin: 0;
}
/* Swiper */
.swiper-container {
position: absolute;
width: 100%;
height: 100vh;
mask-image: url(https://i.ibb.co/kmBv430/Frame.png);
mask-size: contain;
}
/* .above{
position:absolute;
left:25%;
background-color: #fff;
width: 200%;
height: 100vh;
z-index:2;
mask-image: radial-gradient(circle at center, transparent 49%, white 50%);
mask-size: contain;
mask-repeat: no-repeat;
} */
/* Swiper slides */
.swiper-slide {
position: relative;
z-index: 1;
}
.slide-1 {
background-color: #e67204;
}
.slide-2 {
background-color: #e67204;
}
.slide-3 {
background-color: #e67204;
}
.rounded-circle {
width: 400px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 30%;
left: 35%
}
.htu {
position: absolute;
color: #fff;
font-size: 50px;
top: 39%;
left: 10%;
z-index: 2;
}
/* Slide captions */
.slide-captions {
position: absolute;
top: 50%;
left: 75%;
color: #FFF;
z-index: 999;
transform: translateY(-50%);
}
.slide-captions .current-title {
position: absolute;
left: 60%;
margin: 0;
font-size: 48px;
}
.slide-captions .current-subtitle {
margin: 10px 0 0 0;
font-size: 28px;
}
/* Swiper arrows */
.swiper-pagination-bullet-active {
background-color: #fff;
}
/* Swiper pagination */
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 50px;
}
.swiper-button-prev,
.swiper-button-next {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
<script src="https://unpkg.com/swiper#6.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<h1 class="htu">HOW TO USE</h1>
<div class="above"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide slide-1" data-title="Slide One" data-subtitle="">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
<div class="swiper-slide slide-2" data-title="Slide Two" data-subtitle=" ">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
<div class="swiper-slide slide-3" data-title="Slide Three" data-subtitle=" ">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
</div>
</div>
<!-- Slide captions -->
<div class="slide-captions"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I have solved my problem by using GSAP scroll Trigger to trigger the movement of each layer and it works for me.
let tl2 = gsap.timeline({
scrollTrigger :{
trigger : "#sec-4",
pin: true,
scrub: true,
start : "center center",
end: "+=" + (window.innerHeight * 8),
}
});
tl2.from('.step-1', 1, {y: 100, opacity:0 })
tl2.to('.step-1', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -300}, 'frist')
tl2.to('.girl-frame', 1 , {x: -300}, 'frist')
tl2.from('.step-2', 1, {y: 100, opacity:0 }, 'frist')
tl2.to('.step-2', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -600}, 'second')
tl2.to('.girl-frame', 1 , {x: -670}, 'second')
tl2.from('.step-3', 1, {y: 100, opacity:0 }, 'second')
tl2.to('.step-3', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -900}, '3rd')
tl2.to('.girl-frame', 1 , {x: -1050}, '3rd')
tl2.from('.step-4', 2, {y: 100, opacity:0 }, '3rd')
I got stuck on a looping animation till the end of page, so it should continue where it left off. Here is link to code pen
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var granica = width * 10 / 100;
console.log(width);
var animacija = anime({
targets: ".glavniDiv img",
easing: 'linear',
delay: 200,
translateX: [{
value: [0, 50],
duration: 500,
},
{
value: '+=50',
duration: 500,
}
],
translateY: [{
value: [-25, 25],
duration: 500,
},
{
value: '-=25',
duration: 500
}
],
});
.glavniDiv img {
height: 70px;
width: auto;
position: fixed;
top: 50%;
margin-top: -50px;
left: 10%;
}
.glavniDiv {}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="glavniDiv">
<img src="https://technabob.com/blog/wp-content/uploads/2011/11/111711_rg_8BitHeroes_03.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
I tried with for loop and didn't work so i don't know if i tried it wrong way or what
I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.
function over(){
TweenMax.to($(".grid-item-20"), 1, {
width: "50%",
ease: Expo.easeInOut
});
};
function out(){
TweenMax.to($("grid-item-20"), 1, {
width: "0",
ease: Expo.easeInOut,
});
};
$(".grid-item-17 a").hover(over, out);
.grid-item-20 {
border-bottom: 1px solid #000;
width: 0%;
}
<div class="grid-item-17">
Home
</div>
<div class="grid-item-20">
</div>
You're missing the dot on your selector
function out(){
TweenMax.to($(".grid-item-20"), 1, {
width: "0",
ease: Expo.easeInOut,
});
};
function over(){
TweenMax.to($(".grid-item-20"), 1, {
width: "50%",
ease: Expo.easeInOut
});
};
function out(){
TweenMax.to($(".grid-item-20"), 1, {
width: "0",
ease: Expo.easeInOut,
});
};
$(".grid-item-17 a").hover(over, out);
.grid-item-20 {
border-bottom: 1px solid #000;
width: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="grid-item-17">
Home
</div>
<div class="grid-item-20">
</div>
Here's a demo I found: http://clapat.ro/themes/wizzard/
I'm talking about that effect on the burger menu, once you entered it's area, it follows the cursor (and moves with it) for 20px or so.
Obviously found some code in their source:
HTML:
<div id="burger-wrapper" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0px 0px 0px;">
<div id="burger-circle" style="transform: matrix(1, 0, 0, 1, 0, 0);"></div>
<div id="menu-burger" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<span></span>
<span></span>
</div>
</div>
JS:
//Parallax Burger Menu
$('#burger-wrapper').mouseleave(function(e){
TweenMax.to(this, 0.3, {scale: 1});
TweenMax.to('#burger-circle, #menu-burger', 0.3,{scale:1, x: 0, y: 0});
});
$('#burger-wrapper').mouseenter(function(e){
TweenMax.to(this, 0.3, {transformOrigin: '0 0', scale: 1});
TweenMax.to('#burger-circle', 0.3,{scale: 1.3});
});
$('#burger-wrapper').mousemove(function(e){
callParallax(e);
});
function callParallax(e){
parallaxIt(e, '#burger-circle', 60);
parallaxIt(e, '#menu-burger', 40);
}
function parallaxIt(e, target, movement){
var $this = $('#burger-wrapper');
var boundingRect = $this[0].getBoundingClientRect();
var relX = e.pageX - boundingRect.left;
var relY = e.pageY - boundingRect.top;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
TweenMax.to(target, 0.3, {
x: (relX - boundingRect.width/2) / boundingRect.width * movement,
y: (relY - boundingRect.height/2 - scrollTop) / boundingRect.width * movement,
ease: Power2.easeOut
});
}
but I'm not really looking to steal it as it is.
I was wondering if this effect has a specific name?
Shame on me!
Found it after searching again.
If anyones wants to use it:
$('#container').mouseleave(function(e){
TweenMax.to(this, 0.3, {height: 150, width: 150});
TweenMax.to('.circle, .hamburger', 0.3,{scale:1, x: 0, y: 0});
});
$('#container').mouseenter(function(e){
TweenMax.to(this, 0.3, {height: 200, width: 200});
TweenMax.to('.circle', 0.3,{scale:1.3});
});
$('#container').mousemove(function(e){
callParallax(e);
});
function callParallax(e){
parallaxIt(e, '.circle', 80);
parallaxIt(e, '.hamburger', 40);
}
function parallaxIt(e, target, movement){
var $this = $('#container');
var relX = e.pageX - $this.offset().left;
var relY = e.pageY - $this.offset().top;
TweenMax.to(target, 0.3, {
x: (relX - $this.width()/2) / $this.width() * movement,
y: (relY - $this.height()/2) / $this.height() * movement,
ease: Power2.easeOut
});
}
#container{
display: flex;
position: relative;
height: 150px;
width: 150px;
justify-content: center;
align-items: center;
}
.circle{
position: absolute;
height: 50px;
width: 50px;
border: solid 2px gray;
border-radius: 100%;
}
.green{
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
<div class="circle"></div>
<div class="hamburger">=</div>
</div>
I want to add classes on HTML elements one by one.
TweenMax.staggerTo(".some-class-name", 0.5, { className: "+=animation-class" }, 0.5);
I have this code, but it doesn't work. More precisely it works, but it doesn't add className one by one.
How can I achieve an effect like this codepen but with className?
You have a valid Query and if you just want to add a new class to the element. It can be done with TweenMax or TweenLite.
TweenMax
TweenLite.to(element, 0.5, {css:{className:'+=newclass'}});
or
TweenMax.to(element, 0.5, {css:{className:'+=newclass'}});
or
TweenMax.staggerTo(element, 0.5, {css:{className:'+=newclass'}});
You could make a forloop and then pass the class or do a foreach and add this class like this.
for more check out this link :
https://greensock.com/forums/topic/6376-using-greensock-to-change-classes-without-tweening-styles/
Seems fine to me.
Take a look at this jsFiddle.
Or look at the Snippet below.
var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '+=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);
html, body { margin: 0; padding: 0; }
.some-class-name {
position: relative;
float: left;
width: 50px;
height: 50px;
background: #0cc;
}
.animation-class {
background: #cc0;
top: 50px;
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '+=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);
Hope this helps.