Develop Reference

Using Gsap Scrolltrigger and Tweenmax conflict

I have Problems using greensocks gsap Core 3 with tweenmax. When I include the gsap core, tweenmax is not working anymore.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script>
$(document).ready(function (){
var tl = new TimelineLite({paused:true});
tl.set(navigation, {"z-index":12})
.to(panel1, 0, {width: panel1_width})
.to(html, 0, {overflow: 'hidden'}, "-=0.5");
open_btn.on('click', function (e){
e.preventDefault();
tl.play();
});
close_btn.on('click', function (e){
e.preventDefault();
tl.reverse();
});
var images = gsap.utils.toArray(".ce_bgimage-image");
images.forEach((image, i) => {
gsap.fromTo(
image,
{ scale: 0.9 },
{
scale: 1,
ease: "none",
force3D: true,
scrollTrigger: {
//pin:jQuery(image).children(".ce_bgimage-outer"),
trigger: jQuery(image).parent(),
start: "top bottom",
end: "bottom top",
//pinType: isTouch ? "fixed" : "transform",
scrub: 0,
markers: true
}
}
);
});
});
</script>
When I remove the gsap core - tweenlite working fine and scrolltrigger is not working anymore. I think there is a conflict between the libaries.
thank you for your help

TypeError:undefined is not an object (evaluating 'this.haderHomepage.animateIntro') on Macos Big sur

and the details of the error after that:
onPreloaderDone - app.js:57191:93
onComplete app.js:57176
anonymous function - app.js:441
anonymous function - app.js:32994
anonymous function - app.js:614:209
anonymous function - app:js:837
anonymous function - app:js:254
g app.js:277
while the same page works fine in chrome, firefox on windows.
I am trying to add the relevant line of the app.js file if it makes any sense.
line 57145 - 57214
new class {
constructor(t) {
var e = $$("#preloader")
, i = t.lottie.loadAnimation({
name: e,
container: e,
renderer: "svg",
loop: !1,
autoplay: !1,
path: "themes/sailor/js/preloader.json"
});
i.addEventListener("data_ready", (r=>{
t.lottie.play(e),
TweenMax.to($$("#preloader"), .1, {
css: {
opacity: "0"
},
onComplete: ()=>{
$$("body").classList.add("loaded"),
this.headerHomepage = t.monoPages.headerHomepage,
t.monoReveals.startObserve(!1),
t.monoReveals.initLinesReveals(),
t.monoRevealsWords.startObserve(!1),
TweenMax.fromTo($$("#transition"), 1.2, {
scaleY: 1,
transformOrigin: "50% 100%",
backgroundColor: "#434A7F"
}, {
scaleY: 0,
backgroundColor: "#191919",
onComplete: ()=>{
this.onPreloaderDone(),
i.destroy()
}
,
ease: Expo.easeOut
})
}
,
delay: 2.6,
ease: Expo.ease
})
}
))
}
onPreloaderDone() { //next line below is 57191
"home" == $$(".mono-container").getAttribute("data-page") ? this.headerHomepage.animateIntro() : (TweenMax.to(".menu.menu--main", .6, {
opacity: 1,
y: 0,
ease: Power2.easeOut
}),
TweenMax.to(".top.top--main", .6, {
opacity: 1,
y: 0,
ease: Power2.easeOut,
onComplete: ()=>{
$$("body").classList.add("preloader-done")
}
}))
}
}
({
lottie: uh,
monoReveals: dh,
monoRevealsWords: fh,
gravThemeUrl: ch,
monoPages: yh
})
}
]);
so while I tried to check for any 404 error or anything else missing, but couldn't find any.
looks like it is a mac specific issue and need some change in the code for it to work on safari macos big sur.
Note: I also observed that in the body tag class "preloader done" is not added. whereas in windows machine where it is working okay this class is being added fine.

Stop GSAP function after it runs

I'm very new to the concept of web animations.
I'm right now developing "Windows Hello animation".
IN THIS CODE EXAMPLE -
HOW DO I STOP THE ANIMATION AFTER 1st Run, and trigger another JS function afterward.
I've tried many things but couldn't get it to work.
Please help me with where should I change the code.
CODE-
JS
var mainCtr = $("#main-ctr"),
hello = $(".hello"),
eyeLeft = $("#eye-left"),
eyeRight = $("#eye-right"),
eyeToLeft = $("#eye-to-left"),
eyeToRight = $("#eye-to-right"),
wink = $("#wink"),
smileUp = $("#smile-up"),
smileDown = $("#smile-down"),
smile = $("#smile");
var tl = new TimelineMax({
repeat: -1,
repeatDelay: .3,
delay: .3
});
TweenMax.set([mainCtr, hello], {
opacity: 0
});
tl
.to(mainCtr, .3, {
opacity: 1
})
.to(smileDown, .3, {
morphSVG: "#smile-up"
})
.to(smile, .3, {
rotation: -30,
transformOrigin: "center center",
ease: Circ.ease
})
.to(smile, .9, {
rotation: 900,
transformOrigin: "center center",
ease: Circ.easeInOut
})
.to(eyeLeft, .3, {
morphSVG: "#eye-to-left",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .3, {
morphSVG: "#eye-to-right",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .1, {
scaleY: .25,
transformOrigin: "center center"
})
.to(eyeRight, .1, {
scaleY: 1
})
.to(hello, .3, {
opacity: 1
}, "-=.3")
.to(mainCtr, .6, {
delay: 1,
opacity: 0
})
YOU CAN SEE THE CODE LIVE HERE

You can, acheive this by simply removing the repeat and repeatDelay from the TimelineMax function options and to fire a callback once the animation is complete you can use the onComplete option in the TimelineMax function like below:
var tl = new TimelineMax({
delay: .3,
onComplete: function(){
alert('hello')
}
});

I updated your codepen with what you are looking for: here
var mainCtr = $("#main-ctr"),
hello = $(".hello"),
eyeLeft = $("#eye-left"),
eyeRight = $("#eye-right"),
eyeToLeft = $("#eye-to-left"),
eyeToRight = $("#eye-to-right"),
wink = $("#wink"),
smileUp = $("#smile-up"),
smileDown = $("#smile-down"),
smile = $("#smile");
var tl = new TimelineMax();
TweenMax.set([mainCtr, hello], {
opacity: 0
});
tl
.to(mainCtr, .3, {
opacity: 1
})
.to(smileDown, .3, {
morphSVG: "#smile-up"
})
.to(smile, .3, {
rotation: -30,
transformOrigin: "center center",
ease: Circ.ease
})
.to(smile, .9, {
rotation: 900,
transformOrigin: "center center",
ease: Circ.easeInOut
})
.to(eyeLeft, .3, {
morphSVG: "#eye-to-left",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .3, {
morphSVG: "#eye-to-right",
ease: Power2.ease
}, "-=.3")
.to(eyeRight, .1, {
scaleY: .25,
transformOrigin: "center center"
})
.to(eyeRight, .1, {
scaleY: 1
})
.to(hello, .3, {
opacity: 1
}, "-=.3")
You only needed to remove the repeat attribute when you set up your timeline at line 12 (if you set repeat: -1, it means it will be an infinite loop).
To notice I updated the last line as well, so the smile stays there. If you want it to disappear instead, then you just need to add back this bit of code at the end of your js file:
.to(mainCtr, .6, {
delay: 1,
opacity: 0
})

jQuery to monitor links to see if they are hovered over, if they are go up 3 parents and add css/class

I have lots of links on my page with the HTML format of:
<div class="heading-column">
<div class="heading-container">
<h2 class="heading-item">
<a href="/find/">Find</h2>
</div>
</div>
</div>
Currently we have some animations happening when they hover over the heading-column element, but they should actually only happen when hovering over the a hyperlink.
I'm trying to figure out how to create some jQuery to monitor all hyperlinks, if one with the class of .heading-item a is hovered over for it to update its parent 3 higher (.heading-column) by adding the css of pointer-events: auto; but as soon as the mouse stops hovering, this css rule should be deleted so that the pointer-events: none; stops the .heading-column animation/hover from happening
I'd greatly appreciate some help

Have you tried:
$(".heading-column a").hover(function(){
// In
$(this).closest(".heading-column").css("pointer-events", "none");
}, function(){
// Out
$(this).closest(".heading-column").css("pointer-events", "auto");
});
Reference: https://api.jquery.com/hover/
Might consider adding and removing a Class too.

See if this helps -
https://codepen.io/VweMWoz
const tl = gsap.timeline({paused: true});
tl.from(
".gsap-swipe",
{
y: 20,
x: 20,
rotate: -40,
duration: 3,
transformOrigin: '30% 80%',
ease: Elastic.easeOut.config(1, 0.5),
}, 0
)
.fromTo(
".swipe",
{
xPercent: -100
},
{
duration: 1,
xPercent: 100,
ease: Sine.easeInOut,
stagger: {
each: 0.15
}
}, 0
)
.from(
".maskSwipe",
{
xPercent: -100,
ease: Sine.easeInOut
},
0.4
)
.from(
"#hello",
{
duration: 1.5,
drawSVG: "0%"
},
1
)
.from(
".swoop",
{
duration: 2,
drawSVG: "0%"
},
1
)
.from(
".line",
{
drawSVG: "0%",
duration: 0.5,
stagger: {
each: 0.2
}
},
1
)
.from(
".shape",
{
scale: 0,
duration: 1.3,
transformOrigin: "50% 50%",
rotate: '+=random(-60, 60)',
ease: Elastic.easeOut.config(1, 0.8),
stagger: {
each: 0.2
}
},
0.2
);
// ScrubGSAPTimeline(tl);
let hover = document.querySelector('.js-hover');
hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);
function playTl(){
tl.timeScale(1.25).restart();
}
function resetTl(){
tl.progress(0).pause();
}

How to fix this? GSAP animation for Page transition work perfectly only the first time

I`m using barba.js with Gsap.
The idea is to have a transition from the home page and the about page with a centered logo animation, very simple. I click on my button, the transition comes in, the logo scale from 0 to 1, and go down fading, great!
The first animation works as it should but when I clicked again the scale factor is now missing, unfortunately.
How can I fix this to make it work? have a look at my code pen project:
https://codepen.io/cat999/project/editor/AEeEdg
Here my JS
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});