combining two gsap functions into one - javascript

I need to change the value of both anim_img and anim_text in the scrolltrigger() function. In theory, everything should be simple, but somehow it does not work out.
const anim_img = document.querySelectorAll('.info__block_img');
const anim_text = document.querySelectorAll('.info__block_text');
for (var i = 0; i < anim_text.length; i++) {
gsap.to(anim_img[i], {
scrollTrigger: {
trigger: anim_text[i],
markers: true,
start: '-40% center',
end: 'center center',
scrub: 1
},
scale: 1,
opacity: 1
})
gsap.to(anim_text[i], {
scrollTrigger: {
trigger: anim_text[i],
markers: true,
start: '-40% center',
end: 'center center',
scrub: 1
},
margin: 0,
opacity: 1
})
I saw the same values ​​for the variables and decided to combine them into one function, but nothing happened. The videos and documentation say nothing about this.

For combining both the variable you need to keep both in one loop together when you are adding to gsap.to.
here is the possible solution.
const anim_img = document.querySelectorAll('.info__block_img');
const anim_text = document.querySelectorAll('.info__block_text');
for (var i = 0; i < anim_text.length; i++) {
gsap.to([anim_img[i], anim_text[i]], {
scrollTrigger: {
trigger: anim_text[i],
markers: true,
start: '-40% center',
end: 'center center',
scrub: 1
},
opacity: 1,
onUpdate: function () {
gsap.to(anim_img[i], {
scale: 1,
});
gsap.to(anim_text[i], {
margin: 0,
});
}
});
}

Related

why is this.input.keyboard.on('keyup-LEFT', function() {}) not working in phaser.js?

In my sprite sheet I have two separate frames for when the character is not moving, one is for when she was moving left and then stopped and the other for when she was moving right and then stopped, so i need it to fire up on sort of a key up event. I've seen very similar question here, but the answer didn't work for me, it said to add:
scene.input.keyboard.on('keyup-LEFT', function()
{
});
but it just broke my code, screen goes black and nothing happens, i tried adding that code in either create() and update()
So i tried instead:
this.input.keyboard.on('keyup-LEFT', function()
{
player.setVelocityX(0);
player.anims.play('stopLeft');
});
this.input.keyboard.on('keyup-RIGHT', function()
{
player.setVelocityX(0);
player.anims.play('stopRight');
});
It doesn't break my code, but also nothing happens, I also tried player instead of scene or this, (player is a variable to which my sprite is assigned), but that also broke my code, just like scene did.
BTW, stopLeft and stopRight works fine, because i tested them on normal this.input.keyboard.createCursorKeys() events.
The most common way to implement player movement and/or input is, to put the logic in the update function, and check if the keys are pressed/down (isDown).
I would only use this.input.keyboard, for hot-key like 'ESC' or some special hot-keys.
Here a short working demo:
(for more details checkout this official example)
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 100 }
}
},
scene: {
preload,
create,
update
},
banner: false
};
let player;
let cursor;
let animsKeyText;
function preload() {
this.load.spritesheet('dude', 'https://labs.phaser.io/src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
function create() {
let floor = this.add.rectangle(0, config.height, config.width, 20, 0xcdcdcd)
.setOrigin(0, .5);
animsKeyText = this.add.text(10, 10, 'current anims-key: ??')
this.physics.add.existing(floor, true);
player = this.physics.add.sprite(100, 10, 'dude')
.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'stop-left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 1 }),
frameRate: 10,
repeat: 0
});
this.anims.create({
key: 'stop-right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 6 }),
frameRate: 10,
repeat: 0
});
this.physics.add.collider(player, floor);
cursors = this.input.keyboard.createCursorKeys();
}
function update() {
if (cursors.left.isDown) {
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown) {
player.setVelocityX(160);
player.anims.play('right', true);
}
else {
player.setVelocityX(0);
if (player.anims && player.anims.currentAnim) {
// just to prevent of keys "stop-stop....-right" or so
if (player.anims.currentAnim.key.indexOf('stop') == -1) {
let newKey = `stop-${player.anims.currentAnim.key}`;
player.anims.play(newKey, true);
}
}
}
if (player.anims && player.anims.currentAnim) {
animsKeyText.setText(`current anims-key: ${player.anims.currentAnim.key}`);
}
}
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

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

'autoposition' attribute not being applied between JsPanels

I'm starting to use JsPanel in a project at work and I have some doubts on why the 'autoposition' is not being applied between some panels.
I have 4 panels: A, B, C and D.
A panel:
jsPanel.create({
id: 'A',
theme: 'primary',
headerTitle: 'A panel',
position: { my: 'left-top',
at: 'left-top',
offsetX: '0px',
offsetY: '0px',
autoposition: 'down'
},
contentSize: '450 250',
content: '<p> Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
B panel:
jsPanel.create({
id: 'B',
theme: 'primary',
headerTitle: 'B panel',
position: { my: 'center-top',
at: 'center-top',
offsetX: '0px',
offsetY: '0px',
autoposition: 'down'
},
contentSize: '450 250',
content: '<p> Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
C panel:
jsPanel.create({
id: 'C',
theme: 'primary',
headerTitle: 'C panel',
position: { my: 'right-top',
at: 'right-top',
offsetX: '0px',
offsetY: '0px',
autoposition: 'down'
},
contentSize: '450 250',
content: '<p> Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
D panel:
jsPanel.create({
id: 'D',
theme: 'primary',
headerTitle: 'D panel',
position: { my: 'left-top',
at: 'left-bottom',
of: '#A',
autoposition: 'up'
},
contentSize: '450 250',
content: '<p>Test test test</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Are you sure?');
}
});
Reading the documentation of the 'position' option, specifically the 'autoposition' attribute, says that you can set a value to add a gap between panels to prevent them from piling up on each other:
'down' for panels positioned using either 'left-top', 'center-top' or 'right-top' for both my: and at: setting autoposition to 'down' will automatically add a vertical offset downwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.
'up' for panels positioned using either 'left-bottom', 'center-bottom' or 'right-bottom' for both my: and at: setting autoposition to 'up' will automatically add a vertical offset upwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.
but for me it's not being applied. I've tried to remove the autoposition in A or D but no result.
So what am I doing wrong or what have I misunderstood?
Regards.
-- Edit 1:
I have achieved the separation adding:
offsetY: '8px',
to panel D but I think that this is not the correct solution...
I have found the problem. It was a misunderstanding with positions. Seeing example number 5 that adds panels one below the other the positions are:
my: 'right-top',
at: 'right-top',
and then you set:
autoposition: 'down',
So in panel D I had to change:
position: { my: 'left-top',
at: 'left-bottom',
of: '#A',
autoposition: 'up'
},
to
position: { my: 'left-top',
at: 'left-top',
of: '#A',
autoposition: 'down',
offsetY: 4px
},
The offsetY is optional. By default JsPanel adds a 4px separation but if you look on the image, the horizontal separation is 4px + 4px so I add 4 extra pixels to match visually the horizontal separation with the vertically separation.
Regards!

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 fullcalendar - events

I'm working with jQuery fullcalendar (version 2.7.1).
This is what I want to do:
Now I can set the background to red but the text doesn't appear. This is what I'm doing:
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [
{
start: '2016-09-19',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000'
},
{
start: '2016-09-20',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000'
}
]
});
This is how it looks:
So the text isn't added... . And the color is much lighter than the specified color.
As you can see I also didn't add 'today' to my right navigation but it's added anyway ... .
I also wonder how I can limit the navigation of months. That they for example only can select months september, october, november in 2016.. .
Can anyone help me with this questions?
You can use eventAfterRender callback. In this callback append string FULL to element parameter. You can apply CSS styling to this using event-full class.
The background-color is lighter because there is an opacity of 0.3; change it to 1 using event-full class.
To hide today button you have to set left, center, right properties in header object.
To limit the navigation of months you can use viewRender callback.
JS
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'title',
center: '',
right: 'prev,next'
},
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [{
start: '2016-09-19',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}, {
start: '2016-09-20',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}],
eventAfterRender: function (event, element, view) {
element.append('FULL');
},
viewRender: function (view, element) {
var start = new Date("2016-09-01");
var end = new Date("2016-11-30");
if (end < view.end) {
$("#calendar .fc-next-button").hide();
return false;
} else {
$("#calendar .fc-next-button").show();
}
if (view.start < start) {
$("#calendar .fc-prev-button").hide();
return false;
} else {
$("#calendar .fc-prev-button").show();
}
}
});
CSS
.event-full {
color: #fff;
vertical-align: middle !important;
text-align: center;
opacity: 1;
}
WORKING DEMO
I'm using a CSS-driven solution since it seems easier in this case to just let the library do what it is intended to do and work around it. The "Today" button has a specific class so I'd display: none that. The Event objects can accept a className prop. Using that, I positioned a :before element to create the "FULL" text. Lastly, your color variation is due to an opacity of 0.3 on those cells. Setting that to 1 shows the full red background-color that is being applied. \
.fc-today-button {
display: none;
}
.event-full {
position: relative;
opacity: 1;
&:before {
content: "FULL";
position: absolute;
color: #fff;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
}
and the JS:
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [
{
start: '2016-09-19',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
},
{
start: '2016-09-20',
allDay : true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}
]
});
http://codepen.io/amishstripclub/pen/zqQqxx
I would use the disabled attribute instead of showing and hidding buttons:
https://jsfiddle.net/uz0mx059/
viewRender: function(view, element) {
var start = new Date("2016-09-01");
var end = new Date("2016-11-30");
if (end < view.end) {
$("#calendar .fc-next-button").attr('disabled',true);
return false;
} else {
$("#calendar .fc-next-button").attr('disabled',false);
}
if (view.start < start) {
$("#calendar .fc-prev-button").attr('disabled',true);
return false;
} else {
$("#calendar .fc-prev-button").attr('disabled',false);
}
}
Plus a bit of css:
button:disabled {
color: grey;
}

Categories

Resources