Develop Reference

Iphone Safari browser scrolling to top website automatically

When using Safari on an iOS device, a website I'm working on scrolls to top automatically whenever I tried to scroll down.
I found the issue was due to ScrollTrigger.js which I have used to add scroll animation to a svg in HOW? section.
The website is working fine in other browsers.
gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, MotionPathPlugin);
gsap.defaults({ ease: "none" });
const barytdpulses = gsap.timeline({
defaults: {
scale: 1,
autoAlpha: 1,
transformOrigin: 'center',
ease: "elastic(2, 1)"
}
}).to(".ytdbartext01", {}, 1.0)
.to(".ytdbartext02", {}, 4.90)
.to(".ytdbartext03", {}, 5.35)
.to(".ytdbartext04", {}, 6.35)
.to(".ytdbartext05", {}, 7.35)
.to(".ytdbartext07", {}, 5.60)
.to(".ytdbartext06", {}, 15.60)
const mainytdbar = gsap.timeline({
scrollTrigger: {
trigger: "#ytdsvgbar",
scrub: true,
start: "top center",
end: "bottom center"
}
}).from(".theytdBar", { drawSVG: 0, duration: 2.0 })
.from(".theytdBarone", { drawSVG: 0, duration: 3.1 })
.from(".theytdBartwo", { drawSVG: 0, duration: 3.3 })
.from(".theytdBarthree", { drawSVG: 0, duration: 3.6 })
.from(".theytdBarfour", { drawSVG: 0, duration: 3.9 })
.from(".theytdBarfive", { drawSVG: 0, duration: 4.3 })
.add(barytdpulses, 0)
I want to keep the plugin as it is working fine in other browsers.

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.

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();
},
},
],
});
});

How can I better manage using GSAP animations in Nuxt.js?

I am building a portfolio page using nuxt.js and Green Sock(GSAP) animation for on-load, menu, and page transitions. It is more difficult to accommodate GSAP than using CSS based transitions but I feel the results are worth it.
I am not using webpack and nuxt correctly to make everything more modular and concise. I need some help to better export variables and functions, use Vue.js reactive properties better, and take advantage of what's already available instead of working against it.
My default.vue file has a method that manages the menu:
showMenu() {
if (process.browser) {
var tl = new TimelineMax();
var slide = document.querySelector("#slide-menu");
var pl = document.querySelector("body");
var nl = document.querySelectorAll(".nav-link");
if (this.$store.state.menuIsActive === false) {
tl
.to(slide, 0.5, {
y: "100%",
ease: this.$store.state.animParams.ease
})
.staggerTo(
nl,
this.$store.state.animParams.dur3,
{
y: "-10px",
autoAlpha: 1,
ease: this.$store.state.animParams.ease
},
this.$store.state.animParams.dur2
);
} else if (this.$store.state.menuIsActive === true) {
console.log("true");
tl
.staggerTo(
nl,
this.$store.state.animParams.dur3,
{
y: "10px",
autoAlpha: 0,
ease: this.$store.state.animParams.ease
},
this.$store.state.animParams.dur2
)
.to(slide, 0.5, {
y: "-100%",
ease: this.$store.state.animParams.ease
});
}
this.$store.commit("toggleMenuState");
}
}
I have a menu.js middleware that closes the menu when open. I would prefer to use the same variable but redeclare it instead:
import TweenMax from 'gsap'
export default function ({ store }) {
if (store.state.menuIsActive === !false) {
if (process.browser) {
var tl = new TimelineMax()
var slide = document.querySelector('#slide-menu')
var nl = document.querySelectorAll('.nav-link')
if (store.state.menuIsActive === true) {
console.log('initmenu')
tl
.staggerTo(
nl,
store.state.animParams.dur3,
{ y: '10px', autoAlpha: 0, ease: store.state.animParams.ease },
store.state.animParams.dur2
)
.to(slide, 0.5, { y: '-100%', ease: store.state.animParams.ease })
store.commit('setMenuState', false)
}
}
}
}
I duplicated the page transition because I couldn't get it working correctly in my nuxt.config.js. I would like to keep all of my transitions there or in a separate plugins file maybe but am not sure the best way to do so.
From my root index.vue page file:
import TweenMax from "gsap";
export default {
transition: {
name: "page",
mode: "out-in",
css: false,
enter: function(el, done) {
console.log("animenter contact");
if (process.browser) {
var tl = new TimelineMax();
var tg = document.querySelectorAll(".el");
var st = document.querySelector(".overlay-grid img");
var box = document.querySelectorAll(".box");
tl.fromTo(st, 0.3, { x: -100 }, { x: 0, autoAlpha: 1 });
tl.staggerTo(tg, 0.3, { autoAlpha: 1 }, 0.1);
tl.staggerTo(box, 0.3, { autoAlpha: 1, onComplete: done }, 0.1);
}
},
leave: function(el, done) {
console.log("leaving contact...");
if (process.browser) {
var tl = new TimelineMax();
var tg = document.querySelectorAll(".el");
var st = document.querySelector(".overlay-grid img");
var pl = document.querySelector("body");
var box = document.querySelectorAll(".box");
tl.fromTo(st, 0.3, { x: 0 }, { x: -100, autoAlpha: 0 });
tl.staggerTo(tg, 0.3, { autoAlpha: 0 }, 0.1);
tl.staggerTo(box, 0.3, { autoAlpha: 0, onComplete: done }, 0.1);
}
}
}
And finally, in nuxt.config.js:
router: {
middleware: 'menu'
},
build: {
vendor: [
'gsap',
....
] /*
}
I also have some variables set in the store to manage state, and some transition durations so I don't have to edit them in as many places to see how something looks. It is becoming a lot of work to preview ideas or small changes and I wasn't able to find an in-depth article that tackles this problem.
Any help with tips and tricks for Nuxt, Vue, GSAP, Webpack, and Javascript in general would be greatly appreciated.

jQuery on click not working every other time

I have a few sliding screens that are triggered by clicking on images. The first time the image is clicked it seems to work fine but the third time the click is not working for some reason.
JS:
$(document).ready(function () {
var sliding = false;
var introButtons = anime({
targets: '.introButtons',
scale: 0.95,
duration: 800,
easing: 'easeInOutQuart',
direction: 'alternate',
elasticity: 200,
loop: true
});
//Energy Track
$('#for-energy').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#screen2').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Energy back
$('.energy .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen2').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For health
$('#for-health').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#health').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Health back
$('.health .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#health').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For fun
$('#for-fun').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#fun').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//For fun back
$('.fun .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#fun').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
});
I believe the issue is with the sliding variable, I just can't figure out which instance of the variable is causing the issue.
When clicking back and forth from bowls to smoothies to juices and selecting a few options it works the first few times you select a new product and then every third or so time it seems to stop working, i.e. it won't let you select any image. Clicking on the image does nothing.
You can see it in action here: http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/
I'm currently using the sliding variable to keep the toggle from being toggled twice if a user double clicks. See this question for more on what I'm talking about: jQuery slide toggle fires twice on double click

in some function you miss to make sliding = false
and i think you need to put it outside the toggle for example in #island you shoud write it like this and put sliding =false out side the toggle
$('#island').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('.guide').fadeOut('slow', function(){
$('#islandFacts').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});