I'm using GSAP with ASScroll to add a couple of animations to my static site generated with Hugo. All animations work as intended. However when I reload the page only when I'm not scrolled all the way up the animations will go to the last frame and stop. The same thing occurs when the toolbar of Chrome mobile goes all the way up after you scroll down far enough. This occurs on very consistent spots, but not everywhere. For example when scrolling 600px down it would always occur, but at 700px it would never occur.
I'm not getting any errors or warning in the console.
using:
#ashthornton/asscroll 2.0.11
gsap 3.11.3
main.js setup
import ASScroll from '#ashthornton/asscroll'
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import {
Timeline
} from 'gsap/gsap-core';
gsap.registerPlugin(ScrollTrigger);
const isTouch = ('ontouchstart' in document.documentElement);
const asscroll = new ASScroll({
disableRaf: true,
ease: 0.175,
touchEase: 0.175
});
gsap.ticker.add(asscroll.update);
ScrollTrigger.defaults({
scroller: asscroll.containerElement
});
ScrollTrigger.scrollerProxy(asscroll.containerElement, {
scrollTop(value) {
return arguments.length ? asscroll.currentPos = value : asscroll.currentPos;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
}
});
asscroll.on("update", () => ScrollTrigger.refresh());
ScrollTrigger.addEventListener("refresh", asscroll.resize);
window.addEventListener("load", () => {
// ...
Animation:
const imgMicroservice = document.getElementById('img-microservices');
gsap.timeline({
scrollTrigger: {
trigger: imgMicroservice,
start: "top bottom",
onRefresh: () => {},
end: "bottom top",
invalidateOnRefresh: false,
scrub: 1,
},
})
.fromTo(imgMicroservice, {
y: 150,
scale: 0.96,
ease: "none"
}, {
y: 0,
ease: 0,
scale: 1,
rotate: "0deg",
}, 0)
I tried disabling ASScroll, this solved the problem. Though I want to use it or any other smooth scroll js library.
Related
I've read floating-ui doc but there are some methods that I really cant understand such as getElementRects, getClippingRect and getDimensions, I tried to learn then by trail and error but I still haven't figured them out how to work with them, here is my snippet code and its placement just doesn't work.
this._cleanup = autoUpdate(referenceEl, this.floatingEl, () => {
computePosition(referenceEl, this.floatingEl, {
strategy: 'absolute',
middleware: [autoPlacement()],
placement: 'bottom-start',
platform: {
getElementRects: () =>
Promise.resolve({
reference: { width: 0, height: 0, x: 0, y: 0 },
floating: { width: 0, height: 0, x: 0, y: 0 }
}),
getClippingRect: () => ({ x: 0, y: 0, width: 0, height: 0 }),
getDimensions: (element) => {
console.log({ element });
return { width: 0, height: 0 };
}
}
}).then(({ x, y }) => {
Object.assign(this.floatingEl.style, {
position: 'absolute',
left: `${x}px`,
top: `${y}px`
});
});
});
As you can see the floating element is on top end of the input element.
I guess the computePosition method is not configured properly moreover I haven't found any example for vanilla js floating-ui til now.
PS: I can't remove getElementRects, getClippingRect and getDimensions because they are required and if I ignore them with //#ts-ignore it doesn't work.
You don't need to provide the platform object yourself, it's for advanced use cases and is entirely optional as the #floating-ui/dom library already provides those methods for you. If you've installed #floating-ui/core, uninstall it and install #floating-ui/dom instead.
Then, you can remove the platform property from the options to use the default/recommended platform and it will work.
I can add animations to anime timeline using the timeline.add({parameters}) function. Is it possible to remove all the previously added animations and reset the whole timeline?
Thanks,
You can reset the timeline by calling the restart method:
const tl = anime.timeline({
duration: 400,
easing: 'easeInOutQuad',
})
tl.add({
targets: '.box',
rotate: 360,
translateX: {
value: 400,
delay: 400,
}
})
document.querySelector('button').addEventListener('click', () => {
tl.restart();
});
I'm trying to tween a sprite from one point to another and have it fade away while it's moving. I've tried this:
const tween = game.tweens.add({
targets: [log.sprite],
x: fire.x,
y: fire.y + (fire.height * 0.2),
opacity: 0,
duration: 300,
repeat: 0,
onComplete() {
destroyLog(log);
resolve();
},
});
But this doesn't work. I'm having a lot of trouble finding good API docs for Phaser 3, so I'm not sure where I should be looking for this information.
You probably should use alpha instead of opacity. Below is a working example for Phaser3. The start and end value lambdas are good just for flexibility. I guess you can replace them by values directly. this refers to Phaser.Scene instance.
this.add.tween({
targets: [sprite],
ease: 'Sine.easeInOut',
duration: 1000,
delay: 0,
x: {
getStart: () => startX,
getEnd: () => endX
},
y: {
getStart: () => startY,
getEnd: () => endY
},
alpha: {
getStart: () => startAlpha,
getEnd: () => endAlpha
},
onComplete: () => {
// Handle completion
}
});
You can easily find helpful usage examples for Phaser 3 by cloning the repo locally and searching for some keywords in the code.
I am trying to create an animated drag and drop feature, like this: http://moduscreate.com/animated_drag_and_drop_with_react_native/
I want to change it so that when the user starts the touch, the object moves upwards so that it is no longer hidden under their finger. I want this movement to be animated, but I also want to track the panning gesture during the animation.
Right now I have the animation working, as long as the user doesn't move their finger. I am using this code to animate the object up when the touch starts:
onPanResponderStart: (e, gesture) => {
Animated.spring(
this.state.pan,
{
...animationConstants,
toValue: { x: 0, y: -70 },
}
).start((status) => {
// This part ensures that the offset and value are
// set correctly after the animation.
this.state.pan.y.setOffset(-70);
this.state.pan.y.setValue(0);
});
},
But as soon as they move their finger, it cancels the animation and jumps to the top. I am using this code for onPanResponderMove:
onPanResponderMove: Animated.event([null, {
dx: this.state.pan.x,
dy: this.state.pan.y
}]),
I want the animation to continue, even while the user is moving their finger.
How could I change the code so that I am animating the "offset", instead of the "value"? I think I could solve this problem if Animated.spring had the option to use toOffset: {x: ..., y: ...}, as well as to toValue. But I don't think it has that, and I'm not sure how I should emulate this.
I figured something out. I'm not sure about performance, but it seems to work fine.
I set up a separate Animated.Value to animate the offset. I just added a callback using addListener, which calls setOffset to animate the value.
constructor(props){
super(props);
this.state = {
pan: new Animated.ValueXY(),
offset: new Animated.Value(0)
};
this.state.offset.addListener((value) => {
this.state.pan.y.setOffset(value.value);
});
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderStart: (e, gesture) => {
Animated.spring(
this.state.offset,
{ toValue: -70 }
).start();
},
onPanResponderMove: Animated.event([null, {
dx: this.state.pan.x,
dy: this.state.pan.y
}]),
onPanResponderRelease: (e, gesture) => {
Animated.spring(
this.state.pan,
{
toValue: { x: 0, y: 0 }
}
).start();
Animated.spring(
this.state.offset,
{ toValue: 0 }
).start();
}
});
}
I have some sample code up at http://defyordie.com/testbed/
This is for my portfolio and I'm working on replacing my old plugin with fancybox. My issue is with the responsiveness of the work sample popups. Scroll down to my 'work' section and click on one of the top 3 boxes since those are finished.
I'm working on a big cinema display, so I've noticed that as i expand my window, the royalslider running the slideshow expands horizontally but doesnt expand vertically until i make the browser window almost entirely fill my screen. I had hoped that it would scale proportionally. I've either initalized the fancybox incorrectly, royalslider incorrectly, or I have some sort of CSS issue.
The code :
$(document).ready(function () {
$('.fancybox').fancybox({
beforeShow: function () {
$(window).on({
'resize.fancybox': function () {
$.fancybox.update();
}
});
},
afterClose: function () {
$(window).off('resize.fancybox');
},
padding: 0,
margin: [60, 15, 0, 15],
nextEffect: 'fade',
prevEffect: 'none',
helpers: {
overlay: {
locked: false
}
},
afterLoad: function () {
$.extend(this, {
type: 'html',
width: '95%',
height: '100%',
minWidth: '930px'
});
}
});
});