diff --git a/index.php b/index.php
index 301dab0b..e5f26c0f 100644
--- a/index.php
+++ b/index.php
@@ -184,13 +184,13 @@ class="has-black-background-color has-background-dim-100 wp-block-cover__gradien
diff --git a/package.json b/package.json
index b11c8877..b833e7cb 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
"license": "GPL-2.0",
"dependencies": {
"@fontsource/poppins": "^5.0.5",
- "lazysizes": "^5.3.2",
- "oneloop.js": "^5.0.0"
+ "gsap": "^3.12.5",
+ "lazysizes": "^5.3.2"
},
"devDependencies": {
"@wordpress/blocks": "^11.16.0",
diff --git a/src/js/classes/Animation-old.js b/src/js/classes/Animation-old.js
new file mode 100644
index 00000000..b6f1756a
--- /dev/null
+++ b/src/js/classes/Animation-old.js
@@ -0,0 +1,291 @@
+import AbstractDomElement from './AbstractDomElement'
+import { ScrollObserver, SplittedText, ThrottledEvent } from 'oneloop.js'
+import noop from '../utils/noop'
+
+// ----
+// shared variables
+// ----
+const instances = []
+const animationClass = 'js-animation'
+let scrollObserver
+let resize
+
+// ----
+// class Animation
+// ----
+class Animation extends AbstractDomElement {
+ /**
+ * Animation constructor
+ * @param {HTMLElement} element
+ * @param {object} options
+ */
+ constructor(element, options) {
+ const instance = super(element, options)
+
+ // avoid double init :
+ if (!instance.isNewInstance()) {
+ return instance
+ }
+
+ const that = this
+ const el = this._element
+ const s = this._settings
+ const start = getValue(el, s.start)
+ const end = getValue(el, s.end)
+ const callbacksSharedData = {}
+
+ this._elementHeight = this._element.offsetHeight
+ this._windowHeight = window.innerHeight
+ this._onResize = onResize.bind(this)
+ this._isVisible = false
+ this._callbacksSharedData = callbacksSharedData
+
+ // add to instances
+ instances.push(this)
+
+ if (instances.length === 1) {
+ window.addEventListener('beforeprint', onBeforePrint)
+ window.addEventListener('afterprint', onAfterPrint)
+ }
+
+ // init scrollObserver and throttledEvent
+ if (!scrollObserver) {
+ scrollObserver = new ScrollObserver()
+ resize = new ThrottledEvent(window, 'resize')
+ }
+
+ resize.add('resize', this._onResize)
+
+ // add animation class
+ el.classList.add(s.animationClass)
+
+ // intialize callback
+ s.onInit(el, scrollObserver.getScrollInfos(), callbacksSharedData)
+
+ // add element to scrollObserver
+ scrollObserver.observe(el, {
+ onVisible: function (scrollInfos, percentRTW) {
+ const pStart = (this.distanceRTW.y * percentRTW.y) / that._windowHeight
+ const pEnd = (this.distanceRTW.y * percentRTW.y) / (that._windowHeight + that._elementHeight)
+
+ if (!that._isVisible && pStart >= start && pEnd <= end) {
+ // show element
+ that._isVisible = true
+ s.onShow(el, scrollInfos, callbacksSharedData)
+ el.classList.add(s.visibleClass)
+
+ // destroy if playOnce = true
+ if (s.playOnce) {
+ that.destroy(el, scrollInfos, callbacksSharedData)
+ }
+ } else if (that._isVisible && (pStart < start || (pEnd > end && s.hideOnReachEnd))) {
+ // hide element
+ that._isVisible = false
+ s.onHide(el, scrollInfos, callbacksSharedData)
+ el.classList.remove(s.visibleClass)
+ }
+ },
+ })
+ }
+
+ /**
+ * Is visible
+ * @returns {boolean}
+ */
+ isVisible() {
+ return this._isVisible
+ }
+
+ /**
+ * Destroy
+ * @returns {undefined}
+ */
+ destroy() {
+ const el = this._element
+ const s = this._settings
+ const index = instances.indexOf(this)
+ const callbacksSharedData = this._callbacksSharedData
+ let scrollInfos
+
+ if (index === -1) {
+ return
+ }
+
+ super.destroy()
+
+ scrollInfos = scrollObserver.getScrollInfos()
+ instances.splice(index, 1)
+
+ if (s.showOnDestroy) {
+ s.onShow(el, scrollInfos, callbacksSharedData)
+ el.classList.add(s.visibleClass)
+ }
+
+ scrollObserver.unobserve(el)
+ resize.remove('resize', this._onResize)
+
+ if (!scrollObserver.hasEntry) {
+ scrollObserver = scrollObserver.destroy()
+ resize = resize.destroy()
+ }
+
+ if (instances.length === 0) {
+ window.removeEventListener('beforeprint', onBeforePrint)
+ window.removeEventListener('afterprint', onAfterPrint)
+ }
+
+ this._settings.onDestroy(el, scrollInfos, callbacksSharedData)
+ }
+
+ /**
+ * Static destroy
+ * @returns {undefined}
+ */
+ static destroy() {
+ while (instances.length) {
+ instances[0].destroy()
+ }
+ }
+
+ /**
+ * Static are animations enabled
+ * @returns {boolean}
+ */
+ static areAnimationsEnbaled() {
+ return document.documentElement.classList.contains(animationClass)
+ }
+}
+
+// ----
+// defaults
+// ----
+Animation.defaults = {
+ // wanted animation, the class will be added on the element if is not already on it
+ animationClass: 'js-animation-opacity',
+ // class added when the element is in the start/end range
+ visibleClass: 'is-visible',
+ // start (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) []
+ start: 0.25,
+ // end (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) []
+ end: 0.75,
+ // if true, the instance will be destroyed after the element is visible
+ playOnce: false,
+ // if true, remove the visible class when the element reach the end paramter value
+ hideOnReachEnd: false,
+ // if true, set the element visible on destroy whatever the current scroll value
+ showOnDestroy: true,
+ // for each callback : function (element, scrollInfos, callbacksSharedData)
+ onInit: noop,
+ onShow: noop,
+ onHide: noop,
+ onDestroy: noop,
+}
+
+// ----
+// events
+// ----
+/**
+ * onResize
+ * @param {Object} event
+ * @returns {undefined}
+ */
+function onResize() {
+ this._elementHeight = this._element.offsetHeight
+ this._windowHeight = window.innerHeight
+}
+
+/**
+ * On before print
+ * @returns {undefined}
+ */
+function onBeforePrint() {
+ document.documentElement.classList.remove(animationClass)
+}
+/**
+ * On after print
+ * @returns {undefined}
+ */
+function onAfterPrint() {
+ document.documentElement.classList.add(animationClass)
+}
+
+// ----
+// utils
+// ----
+/**
+ * get value
+ * @param {HTMLElement} element
+ * @param {mixed} value
+ * @returns {mixed}
+ */
+function getValue(element, value) {
+ let rt = value
+
+ if (typeof value === 'function') {
+ rt = value(element)
+ } else if (Array.isArray(value)) {
+ rt = Math.random() * (value[1] - value[0]) + value[0]
+ }
+
+ return rt
+}
+
+// ----
+// presets
+// ----
+Animation.preset = {
+ '.js-animation .js-animation-opacity': undefined,
+ '.js-animation .js-animation-translation': {
+ animationClass: 'js-animation-translation',
+ start: [0.2, 0.25],
+ end: [0.75, 0.8],
+ onInit: function (el, scrollInfos, data) {
+ data.translate = Math.round(Math.random() * 100 + 100) * -1
+ el.children[0].style.transitionDuration = Math.random() * 0.75 + 0.75 + 's'
+ },
+ onShow: function (el, scrollInfos, data) {
+ el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)'
+ },
+ onHide: function (el, scrollInfos, data) {
+ el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)'
+ },
+ },
+ '.js-animation .js-animation-title': {
+ animationClass: 'js-animation-title',
+ onInit: function (el, scrollInfos, data) {
+ document.fonts.ready.then(function () {
+ data.splittedText = new SplittedText(el, {
+ byLine: true,
+ lineWrapper: function (line) {
+ return '' + line + ''
+ },
+ })
+
+ const children = el.getElementsByClassName('st-line')
+ const length = children.length
+ let i
+
+ if (length > 1) {
+ for (i = 0; i < length; i++) {
+ children[i].children[0].style.transitionDelay = i / (length - 1) / 5 + 's'
+ }
+ }
+
+ el.classList.add('is-ready')
+ })
+ },
+ onDestroy: function (el, scrollInfos, data) {
+ data.splittedText.destroy()
+ },
+ },
+}
+
+// ----
+// presets
+// ----
+Animation.initFromPreset()
+
+// ----
+// export
+// ----
+export default Animation
diff --git a/src/js/classes/Animation.js b/src/js/classes/Animation.js
index b6f1756a..3344eca3 100644
--- a/src/js/classes/Animation.js
+++ b/src/js/classes/Animation.js
@@ -1,24 +1,14 @@
import AbstractDomElement from './AbstractDomElement'
-import { ScrollObserver, SplittedText, ThrottledEvent } from 'oneloop.js'
+import gsap from 'gsap'
+import ScrollTrigger from 'gsap/ScrollTrigger'
import noop from '../utils/noop'
-// ----
-// shared variables
-// ----
const instances = []
-const animationClass = 'js-animation'
-let scrollObserver
-let resize
// ----
-// class Animation
+// class - à supprimer ?
// ----
class Animation extends AbstractDomElement {
- /**
- * Animation constructor
- * @param {HTMLElement} element
- * @param {object} options
- */
constructor(element, options) {
const instance = super(element, options)
@@ -27,133 +17,55 @@ class Animation extends AbstractDomElement {
return instance
}
- const that = this
- const el = this._element
- const s = this._settings
- const start = getValue(el, s.start)
- const end = getValue(el, s.end)
- const callbacksSharedData = {}
+ // Register gsap plugins
+ gsap.registerPlugin(ScrollTrigger)
- this._elementHeight = this._element.offsetHeight
- this._windowHeight = window.innerHeight
- this._onResize = onResize.bind(this)
- this._isVisible = false
- this._callbacksSharedData = callbacksSharedData
+ const el = this._element
+ const settings = this._settings
- // add to instances
- instances.push(this)
+ // add animation class
+ el.classList.add(settings.animationClass)
+
+ this._scrollTrigger = ScrollTrigger.create({
+ trigger: element,
+ start: settings.start,
+ end: settings.end,
+ markers: false, // Markers is a visual aid that helps us set start and end points.
+ toggleClass: settings.visibleClass,
+ once: settings.playOnce,
+ onEnter: ({ progress, direction, isActive }) => settings.onEnter(progress, direction, isActive),
+ onLeave: ({ progress, direction, isActive }) => settings.onLeave(progress, direction, isActive),
+ })
- if (instances.length === 1) {
+ if (instances.length === 0) {
window.addEventListener('beforeprint', onBeforePrint)
window.addEventListener('afterprint', onAfterPrint)
}
- // init scrollObserver and throttledEvent
- if (!scrollObserver) {
- scrollObserver = new ScrollObserver()
- resize = new ThrottledEvent(window, 'resize')
- }
-
- resize.add('resize', this._onResize)
-
- // add animation class
- el.classList.add(s.animationClass)
-
- // intialize callback
- s.onInit(el, scrollObserver.getScrollInfos(), callbacksSharedData)
-
- // add element to scrollObserver
- scrollObserver.observe(el, {
- onVisible: function (scrollInfos, percentRTW) {
- const pStart = (this.distanceRTW.y * percentRTW.y) / that._windowHeight
- const pEnd = (this.distanceRTW.y * percentRTW.y) / (that._windowHeight + that._elementHeight)
-
- if (!that._isVisible && pStart >= start && pEnd <= end) {
- // show element
- that._isVisible = true
- s.onShow(el, scrollInfos, callbacksSharedData)
- el.classList.add(s.visibleClass)
-
- // destroy if playOnce = true
- if (s.playOnce) {
- that.destroy(el, scrollInfos, callbacksSharedData)
- }
- } else if (that._isVisible && (pStart < start || (pEnd > end && s.hideOnReachEnd))) {
- // hide element
- that._isVisible = false
- s.onHide(el, scrollInfos, callbacksSharedData)
- el.classList.remove(s.visibleClass)
- }
- },
- })
- }
-
- /**
- * Is visible
- * @returns {boolean}
- */
- isVisible() {
- return this._isVisible
+ instances.push(this)
}
- /**
- * Destroy
- * @returns {undefined}
- */
destroy() {
- const el = this._element
- const s = this._settings
- const index = instances.indexOf(this)
- const callbacksSharedData = this._callbacksSharedData
- let scrollInfos
-
- if (index === -1) {
- return
- }
-
- super.destroy()
+ this._scrollTrigger.kill()
- scrollInfos = scrollObserver.getScrollInfos()
- instances.splice(index, 1)
-
- if (s.showOnDestroy) {
- s.onShow(el, scrollInfos, callbacksSharedData)
- el.classList.add(s.visibleClass)
- }
-
- scrollObserver.unobserve(el)
- resize.remove('resize', this._onResize)
-
- if (!scrollObserver.hasEntry) {
- scrollObserver = scrollObserver.destroy()
- resize = resize.destroy()
- }
+ instances.splice(instances.indexOf(this), 1)
if (instances.length === 0) {
window.removeEventListener('beforeprint', onBeforePrint)
window.removeEventListener('afterprint', onAfterPrint)
}
-
- this._settings.onDestroy(el, scrollInfos, callbacksSharedData)
}
+}
- /**
- * Static destroy
- * @returns {undefined}
- */
- static destroy() {
- while (instances.length) {
- instances[0].destroy()
- }
- }
+// ----
+// events
+// ----
+function onBeforePrint() {
+ document.documentElement.classList.remove('js-animation')
+}
- /**
- * Static are animations enabled
- * @returns {boolean}
- */
- static areAnimationsEnbaled() {
- return document.documentElement.classList.contains(animationClass)
- }
+function onAfterPrint() {
+ document.documentElement.classList.add('js-animation')
}
// ----
@@ -164,70 +76,14 @@ Animation.defaults = {
animationClass: 'js-animation-opacity',
// class added when the element is in the start/end range
visibleClass: 'is-visible',
- // start (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) []
- start: 0.25,
- // end (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) []
- end: 0.75,
+ // start : The ScrollTrigger's starting scroll position (numeric, in pixels). Reflect the scroll position in pixels
+ start: 'top 85%',
+ // end : The ScrollTrigger's ending scroll position (numeric, in pixels). Reflect the scroll position in pixels
+ end: 'bottom 15%',
// if true, the instance will be destroyed after the element is visible
playOnce: false,
- // if true, remove the visible class when the element reach the end paramter value
- hideOnReachEnd: false,
- // if true, set the element visible on destroy whatever the current scroll value
- showOnDestroy: true,
- // for each callback : function (element, scrollInfos, callbacksSharedData)
- onInit: noop,
- onShow: noop,
- onHide: noop,
- onDestroy: noop,
-}
-
-// ----
-// events
-// ----
-/**
- * onResize
- * @param {Object} event
- * @returns {undefined}
- */
-function onResize() {
- this._elementHeight = this._element.offsetHeight
- this._windowHeight = window.innerHeight
-}
-
-/**
- * On before print
- * @returns {undefined}
- */
-function onBeforePrint() {
- document.documentElement.classList.remove(animationClass)
-}
-/**
- * On after print
- * @returns {undefined}
- */
-function onAfterPrint() {
- document.documentElement.classList.add(animationClass)
-}
-
-// ----
-// utils
-// ----
-/**
- * get value
- * @param {HTMLElement} element
- * @param {mixed} value
- * @returns {mixed}
- */
-function getValue(element, value) {
- let rt = value
-
- if (typeof value === 'function') {
- rt = value(element)
- } else if (Array.isArray(value)) {
- rt = Math.random() * (value[1] - value[0]) + value[0]
- }
-
- return rt
+ onEnter: noop,
+ onLeave: noop,
}
// ----
@@ -237,46 +93,6 @@ Animation.preset = {
'.js-animation .js-animation-opacity': undefined,
'.js-animation .js-animation-translation': {
animationClass: 'js-animation-translation',
- start: [0.2, 0.25],
- end: [0.75, 0.8],
- onInit: function (el, scrollInfos, data) {
- data.translate = Math.round(Math.random() * 100 + 100) * -1
- el.children[0].style.transitionDuration = Math.random() * 0.75 + 0.75 + 's'
- },
- onShow: function (el, scrollInfos, data) {
- el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)'
- },
- onHide: function (el, scrollInfos, data) {
- el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)'
- },
- },
- '.js-animation .js-animation-title': {
- animationClass: 'js-animation-title',
- onInit: function (el, scrollInfos, data) {
- document.fonts.ready.then(function () {
- data.splittedText = new SplittedText(el, {
- byLine: true,
- lineWrapper: function (line) {
- return '' + line + ''
- },
- })
-
- const children = el.getElementsByClassName('st-line')
- const length = children.length
- let i
-
- if (length > 1) {
- for (i = 0; i < length; i++) {
- children[i].children[0].style.transitionDelay = i / (length - 1) / 5 + 's'
- }
- }
-
- el.classList.add('is-ready')
- })
- },
- onDestroy: function (el, scrollInfos, data) {
- data.splittedText.destroy()
- },
},
}
diff --git a/src/js/classes/Header.js b/src/js/classes/Header.js
index e0cf95cd..19ec8f89 100644
--- a/src/js/classes/Header.js
+++ b/src/js/classes/Header.js
@@ -1,6 +1,6 @@
import AbstractDomElement from './AbstractDomElement'
import each from '../utils/each'
-import { Tween } from 'oneloop.js'
+import gsap from 'gsap'
import isRTL from '../utils/isRTL'
class Header extends AbstractDomElement {
@@ -17,34 +17,12 @@ class Header extends AbstractDomElement {
const toggle = el.getElementsByClassName('header__menu-toggle')[0]
const menuList = el.getElementsByClassName('header__menu-list')[0]
const liWithChidren = el.getElementsByClassName('menu-item-has-children')
- const menu = el.getElementsByClassName('header__menu')[0]
- this._menu = menu
+ this._menu = el.getElementsByClassName('header__menu')[0]
this._toggle = toggle
this._openedSubMenu = null
this._mouseTimers = {}
- this._menuTween = new Tween({
- autoStart: false,
- reverse: true,
- duration: 1000,
- easing: 'easeInOutExpo',
- onUpdate: function (timestamp, tick, percent) {
- const bp = 768
- let direction = window.innerWidth >= bp ? -1 : 1
-
- if (isRTL()) {
- direction = window.innerWidth >= bp ? 1 : -1
- }
-
- menu.style.transform = 'translateX(' + 100 * (percent - 1) * direction + '%)'
- },
- onComplete: function (timestamp, tick, lastValue) {
- if (lastValue === 0) {
- menu.style.display = ''
- menu.style.transform = ''
- }
- },
- })
+ this._menuTween = null
// avoid error for empty theme
if (menuList) {
@@ -70,15 +48,44 @@ class Header extends AbstractDomElement {
this._menu.style.display = 'block'
this._element.classList.add(this._settings.menuOpenedClass)
this._toggle.setAttribute('aria-expanded', 'true')
- this._menuTween.start()
+
+ if (this._menuTween) {
+ this._menuTween.kill()
+ }
+
+ this._menuTween = gsap.to(this._menu, {
+ x: '0%',
+ duration: 1,
+ ease: 'expo.out',
+ })
return this
}
closeMenu() {
+ const bp = 768
+ let direction = window.innerWidth >= bp ? -1 : 1
+
+ if (isRTL()) {
+ direction = window.innerWidth >= bp ? 1 : -1
+ }
+
this._element.classList.remove(this._settings.menuOpenedClass)
this._toggle.setAttribute('aria-expanded', 'false')
- this._menuTween.start()
+
+ if (this._menuTween) {
+ this._menuTween.kill()
+ }
+
+ this._menuTween = gsap.to(this._menu, {
+ x: -100 * direction + '%',
+ duration: 1,
+ ease: 'expo.out',
+ onComplete: () => {
+ this._menu.style.display = ''
+ this._menu.style.transform = ''
+ },
+ })
return this
}
@@ -105,13 +112,11 @@ class Header extends AbstractDomElement {
liParent.classList.add(this._settings.liSubMenuOpenedClass)
toggle.setAttribute('aria-expanded', 'true')
- new Tween({
- duration: 500,
- easing: 'easeOutExpo',
- onUpdate: function (timestamp, tick, percent) {
- subMenu.style.height = childHeight * percent + 'px'
- },
- onComplete: function () {
+ gsap.to(subMenu, {
+ height: childHeight + 'px',
+ duration: 0.5,
+ ease: 'expo.out',
+ onComplete: () => {
subMenu.style.height = 'auto'
},
})
@@ -131,13 +136,11 @@ class Header extends AbstractDomElement {
liParent.classList.remove(this._settings.liSubMenuOpenedClass)
toggle.setAttribute('aria-expanded', 'false')
- new Tween({
- duration: 500,
- easing: 'easeOutExpo',
- onUpdate: function (timestamp, tick, percent) {
- subMenu.style.height = currentHeight * (1 - percent) + 'px'
- },
- onComplete: function () {
+ gsap.to(subMenu, {
+ height: '0px',
+ duration: 0.5,
+ ease: 'expo.out',
+ onComplete: () => {
subMenu.style.display = ''
},
})
diff --git a/src/js/classes/ScrollDirection.js b/src/js/classes/ScrollDirection.js
index 1ef5ced4..6c94194a 100644
--- a/src/js/classes/ScrollDirection.js
+++ b/src/js/classes/ScrollDirection.js
@@ -1,5 +1,6 @@
import AbstractDomElement from './AbstractDomElement.js'
-import { ScrollObserver } from 'oneloop.js'
+import gsap from 'gsap'
+import ScrollTrigger from 'gsap/ScrollTrigger.js'
class ScrollDirection extends AbstractDomElement {
constructor(element, options) {
@@ -10,31 +11,33 @@ class ScrollDirection extends AbstractDomElement {
return instance
}
- const that = this
+ gsap.registerPlugin(ScrollTrigger)
- this._scrollObserver = new ScrollObserver()
this._directions = ['top', 'bottom', 'up', 'down']
this._current = null
this._isEditable = true
this._timer = null
-
- this._scrollObserver.observe(this._element, {
- onAlways: function (scroll, percentRTW, percentRTE) {
- const p = Math.min(Math.round(percentRTE.y * 100), 100)
+ this._scrollTrigger = ScrollTrigger.create({
+ trigger: this._element,
+ start: 'top top',
+ end: 'bottom bottom',
+ markers: false,
+ onUpdate: (self) => {
+ const p = self.progress
if (p === 0) {
- that.set('top')
- } else if (p === 100) {
- that.set('bottom')
- } else if (scroll.direction.y === -1) {
- that.set('up')
- } else if (scroll.direction.y === 1) {
- that.set('down')
+ this.set('top')
+ } else if (p === 1) {
+ this.set('bottom')
+ } else if (self.direction === -1) {
+ this.set('up')
+ } else if (self.direction === 1) {
+ this.set('down')
}
},
})
- that.set('top')
+ this.set('top')
}
set(direction) {
@@ -77,7 +80,7 @@ class ScrollDirection extends AbstractDomElement {
destroy() {
super.destroy()
- this._scrollObserver.unobserve(this._element)
+ this._scrollTrigger.kill()
this._element.classList.remove('scroll-' + this._directions[this._current])
}
}
diff --git a/src/scss/04-utilities/_js-animation.scss b/src/scss/04-utilities/_js-animation.scss
index db2ef44b..1d855c1e 100644
--- a/src/scss/04-utilities/_js-animation.scss
+++ b/src/scss/04-utilities/_js-animation.scss
@@ -31,17 +31,15 @@
// ----
%js-animation-opacity-init {
opacity: 0;
- transition: opacity .5s;
+ transition: opacity 1s $ease-out-expo;
}
// ----
// vertical translation + opacity animation
// ----
%js-animation-translation-init {
- > * {
- opacity: 0;
- transition: opacity .5s, transform .5s $ease-out-expo;
- transform: translateY(100px);
- }
+ opacity: 0;
+ transition: opacity 1s, transform 1s $ease-out-expo;
+ transform: translateY(100px);
}
// ----
// title animation
@@ -104,10 +102,8 @@
@extend %js-animation-translation-init;
&.is-visible {
- > * {
- opacity: 1;
- transform: translateY(0) !important;
- }
+ opacity: 1;
+ transform: translateY(0);
}
}
}
diff --git a/yarn.lock b/yarn.lock
index 16d20b15..c1de7efb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3188,6 +3188,7 @@ __metadata:
eslint-config-prettier: ^8.5.0
eslint-plugin-prettier: ^4.2.1
eslint-webpack-plugin: ^3.2.0
+ gsap: ^3.12.5
image-minimizer-webpack-plugin: ^3.8.2
imagemin: ^8.0.1
imagemin-gifsicle: ^7.0.0
@@ -3198,7 +3199,6 @@ __metadata:
json2csv: ^5.0.6
lazysizes: ^5.3.2
mini-css-extract-plugin: ^1.5.0
- oneloop.js: ^5.0.0
ora: ^5.4.0
portfinder: ^1.0.28
postcss: ^8.4.24
@@ -3683,9 +3683,9 @@ __metadata:
linkType: hard
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001464":
- version: 1.0.30001468
- resolution: "caniuse-lite@npm:1.0.30001468"
- checksum: 39f23ce5af90fee37004bee334cd809a20f8aa46ef08244f75e33d2e32b53cfebee205018769a2712937fa05ea5a1c0249175771ffee561acd1e8e05c54f9a67
+ version: 1.0.30001625
+ resolution: "caniuse-lite@npm:1.0.30001625"
+ checksum: e7f8b9e10c35a5d9a1d1db76be398cb1c592ee1bc905fabe6bd90313537099d29a65c49c85e6350132fa30ca20e8c0317ecfaa66d997f7fac21ff37ddaece2a9
languageName: node
linkType: hard
@@ -6341,6 +6341,13 @@ __metadata:
languageName: node
linkType: hard
+"gsap@npm:^3.12.5":
+ version: 3.12.5
+ resolution: "gsap@npm:3.12.5"
+ checksum: 60b99dc4482992ba86013963ee9a97a5ec62d480495dd85764788913245aa08cfd202c1df4bbc7592e43d5faa885127bec75f77266f2964fe3d3b559ab63f852
+ languageName: node
+ linkType: hard
+
"gzip-size@npm:^6.0.0":
version: 6.0.0
resolution: "gzip-size@npm:6.0.0"
@@ -8588,13 +8595,6 @@ __metadata:
languageName: node
linkType: hard
-"oneloop.js@npm:^5.0.0":
- version: 5.0.0
- resolution: "oneloop.js@npm:5.0.0"
- checksum: 1cd7681f8d35ff24b1de25508d51f0c4d05c5b973d8846d37cee5eae677c7f49c39f23041701f4ba29d7766f8156b899567c398c09797bb57fecbb2232bf11fa
- languageName: node
- linkType: hard
-
"onetime@npm:^5.1.0, onetime@npm:^5.1.2":
version: 5.1.2
resolution: "onetime@npm:5.1.2"