Amir Mohamadi
78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
export const fadeInAnimation = {
|
|
mounted() {
|
|
/////////////////////////////////////// class 1 animation
|
|
const fadeInElements = $('.anim-fadeIn')
|
|
|
|
Object.keys(fadeInElements).forEach((item, index) => {
|
|
if (index < fadeInElements.length) {
|
|
this.$gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: $(fadeInElements[item]),
|
|
start: 'top 90%'
|
|
}
|
|
})
|
|
.from($(fadeInElements[item]), {y: 10, opacity: 0, duration: 0.7})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
export const stretchAnimation = {
|
|
mounted() {
|
|
/////////////////////////////////////// class 1 animation
|
|
const stretchElements = $('.anim-stretch')
|
|
|
|
Object.keys(stretchElements).forEach((item, index) => {
|
|
if (index < stretchElements.length) {
|
|
this.$gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: $(stretchElements[item]),
|
|
start: 'top 80%'
|
|
}
|
|
})
|
|
.from($(stretchElements[item]), {scaleY: 1.2, duration: 0.3})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
export const parallaxAnimation_hero = {
|
|
mounted() {
|
|
/////////////////////////////////////// parallax animation
|
|
this.$gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: $('.anim-parallax-hero'),
|
|
start: 'top 0%',
|
|
scrub: true
|
|
}
|
|
})
|
|
.to($('.anim-parallax-hero'), {y: '40%', duration: 1})
|
|
.to($('.anim-parallax-hero-txt'), {y: '25%', duration: 1}, 0)
|
|
.to($('.anim-parallax-hero-container'), {y: '15%', duration: 1}, 0)
|
|
}
|
|
}
|
|
|
|
|
|
export const parallaxAnimation = {
|
|
mounted() {
|
|
/////////////////////////////////////// parallax animation
|
|
const parallaxElements = $('.anim-parallax')
|
|
|
|
Object.keys(parallaxElements).forEach((item, index) => {
|
|
if (index < parallaxElements.length) {
|
|
this.$gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: $(parallaxElements[item]),
|
|
start: 'top 50%',
|
|
end: 'bottom 0%',
|
|
scrub: true
|
|
}
|
|
})
|
|
.to($(parallaxElements[item]), {y: '30%', duration: 1})
|
|
}
|
|
})
|
|
}
|
|
}
|