Trying to use Element.animate() to change background-color, to mimic refresh effect.
Code:
const blinkOnPage = (id) => {
document.getElementById(id).animate(
[
{"background-color": '#def', color: '#def'},
], {
easing: 'ease-in-out',
duration: 200
});
}
In my test, color works, but background-color doesn't, how to fix it?
Never mind, just found the solution:
Change background-color to background works.
const blinkOnPage = (id) => {
document.getElementById(id).animate(
[
{background: '#def', color: '#def'},
], {
easing: 'ease-in-out',
duration: 100
});
}
Related
I am trying to animate buttons in my application using GSAP. User clicks button and animates the maxWidth of the button. I'd like to have this dynamic and add a percentage of the max width that is set using props. is it possible to pass the prop maxwidth to the gsap timeline? as of now it does not work for me.
props: {
maxWidth: {
type: String,
required: true,
},
},
methods: {
buttonTo(path) {
let tl = this.$gsap.timeline({
onComplete: function () {
pushToPath();
},
});
tl.to(this.$refs.primaryButton, {
duration: 0.6,
ease: 'power2.in',
maxWidth: `calc(${this.maxWidth} + 5%)`,
});
const pushToPath = () => {
this.$router.push({ path: path });
};
},
},
I've run into a similar issue before. The nice thing is that it has nothing to do with the Vue Lifecycle, so the value is available within methods.
There are a couple of things that could be causing this issue. I'd start by making sure your prop, "maxWidth," has "px" or some form of CSS measurement tied to it. CSS calc can't have a plain number within the CSS "calc" function.
Here is an example using your function:
props: {
maxWidth: {
type: String,
required: true,
},
},
methods: {
buttonTo(path) {
let tl = this.$gsap.timeline({
onComplete: function () {
pushToPath();
},
});
tl.to(this.$refs.primaryButton, {
duration: 0.6,
ease: 'power2.in',
maxWidth: `calc(${this.maxWidth}px + 5%)`,
});
const pushToPath = () => {
this.$router.push({ path: path });
};
},
},
You could also switch your prop to be of the type "Number" in case, for some reason, the string is causing issues within the timeline.
If this helps, please let me know!
javascript is almost new for me and I wanted to use a transition with barba.js.
Unfortunately, I encountered a problem that seems common, once my transition is done, I have to reload the page for the additional scripts to work.
I've been looking for a long time and tried a lot of solutions, but with my level of javascript, I'm not even sure I've typed the code correctly.
I leave my Github project here, if someone is willing to explain to a noob how to write code correctly, I will be eternally grateful.
https://github.com/Jeremmie/punchyparasite_2
const wipe = document.querySelector('.wipe-transition');
const allBandes = document.querySelectorAll('.bande');
const TLAnim = new TimelineMax();
function delay(n) {
return new Promise((done) => {
setTimeout(() => {
done();
}, n)
})
}
barba.init({
sync: true,
transitions: [
{
async leave() {
const done = this.async();
TLAnim
.to(allBandes, { height: '100%', stagger: 0.05 })
// TLAnim.to(wipe, {left: '0%', ease: "power2.out", duration: 0.5});
await delay(1500);
done();
},
enter() {
// TLAnim
// .to(wipe, {left: '100%', ease:"power2.in", duration: 0.5})
// .set(wipe, {left: '-100%'})
TLAnim
.to(allBandes, { height: '0%', stagger: 0.05 })
}
}
]
})
I have an issue with jQuery not firing on the else statement and I'm pretty sure its pretty simple why it's not but unable to solve it myself due to the lack of my JavaScript knowledge, I'm hoping that someone can tell me the issue.
My jQuery script has two sets of actions, one for above 639px and one set below. It works on the page load but if you reduce the size from 1600px to 600px, the height remains of the element remains the height of the window despite going under 639px it does not change it to height-min: auto.
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto');
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
}
}).resize();
});
The min-height declaration does not work because you have a typo: the selectors in your if-else conditions are not the same:
In the if block: $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
In the else block: $('.nanoContainer, .flexAligner .vegas-container')
A comma is missing from the latter, and without your markup I cannot tell which one is the intended selector.
With regards to the issue with .vegas() not working as it should, that is because you are only initialising the plugin at different breakpoints, but never destroying the other instance. In this case, I refer you to the code: the plugin appears to expose a destroy function, which you can call to destroy the instance when switching between breakpoints, e.g. $selector.vegas('destroy').
Here is a code that might work: no guarantees since you have not provided an MCVE and I am unable to test it:
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
// Set min-height
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
// Create new Vegas instance
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$(".home .intro").vegas('destroy');
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto');
// Create new Vegas instance
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$("body.home").vegas('destroy');
}
}).resize();
});
In the following code I want to create the functionality of a like button when the svg symbol is clicked. I am having trouble getting the value of sPaper, sPolyFill and sPolyEmpty.
So far as is they return undefined.
I need to integrate the symbolAnim function into the like and unlike function. How can I do this?
var LikeButtonView = BaseButtonView.extend({
template: _.template($('#like-button-test').html()),
sPaper: null,
sPolyFill: null,
sPolyEmpty: null,
initialize: function (options) {
BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
this.butn = $("button.heart-icon", this.$el);
this.sPaper = Snap(heartIcon.get(0));
this.sPolyFill = sPaper.select('.symbol-solid');
this.sPolyEmpty = sPaper.select('.symbol-empty');
},
like: function () {
console.log("Like clicked");
if (this.butn.hasClass("isLiked")) {
this.unlike();
} else if (this.butn.hasClass("unliked")){
this.butn.removeClass("unLiked");
this.butn.addClass("isLiked");
this.addBlur();
}
},
unlike: function () {
this.butn.removeClass('isLiked');
this.butn.addClass("unLiked");
this.addBlur();
},
symbolAnim: function(heartIcon, isLiked) {
if (isLiked === false) {
sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
} else {
sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
}
}
});
Ok so I got the object by targeting this.butn
initialize: function (options) {
BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
this.butn = $("button.heart-icon", this.$el);
this.svgNode = this.butn.find("svg").get(0);
this.sPaper = Snap(this.svgNode);
this.sPolyFill = this.sPaper.select('.symbol-solid');
this.sPolyEmpty = this.sPaper.select('.symbol-empty');
console.log(this.sPaper);
Now I need to implement the functionality of symbolAnim in the like and unlike funcitons
For my like button function, which is triggered in the event has as "click selector": "like", I have come up with the following. However this only works once. So when I click the button the first time it adds the class liked and removes the class unliked, which is the default for the html element. Then when it is clicked again, it removes the liked class and adds the unliked class. So far it works as desired.
The problem is when I try to click it again, to like it again, and nothing happens. It doesn't call the like function anymore and the class remains the unliked.
What is causing this problem and how can I fix it?
like: function () {
if (this.butn.hasClass("liked")) {
this.unlike();
} else if (this.butn.hasClass("unliked")) {
this.controller();
console.log("Like clicked");
}
},
controller: function () {
this.butn.removeClass("unliked");
this.butn.addClass("liked");
this.sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
this.sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
},
unlike: function () {
this.butn.removeClass('liked');
this.butn.addClass("unLiked");
this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
console.log("Unliked");
}
So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position