TD
Добрый день!)
Помоги пожалуйста с кодом >_< Я понимаю, что скорее всего это просто и мне тупо не хватает знаний (все знать не реально...)
Есть сайт https://studio-size.com/ под видео есть блоки, у которых сделана очень интересная анимация перехода.
Я использую swup - https://swup.js.org/getting-started
Все подключила и работает.
Для анимации использую gsap flip и смогла сделать:
https://codepen.io/cassie-codes/pen/0f32cad9b2e2070a11560936857e85fb
Вопрос! Как совместить swup и gsap?
Просто не могу понять принцип :(
Код Swup:
const swup = new Swup({
plugins: [new SwupOverlayTheme({
color: '#000000',
duration: 100,
})]
});
const options = {
cache: true,
};
swup.on('pageView', function() {
dataLayer.push({
event: 'VirtualPageview',
virtualPageURL: window.location.pathname,
virtualPageTitle: document.title
});
});
swup.on('contentReplaced', function() {
swup.options.containers.forEach((selector) => {
});
});
document.addEventListener('swup:contentReplaced', (event) => {<тут скрипты, которые должны не ломаться при переходе>});
Помоги пожалуйста с кодом >_< Я понимаю, что скорее всего это просто и мне тупо не хватает знаний (все знать не реально...)
Есть сайт https://studio-size.com/ под видео есть блоки, у которых сделана очень интересная анимация перехода.
Я использую swup - https://swup.js.org/getting-started
Все подключила и работает.
Для анимации использую gsap flip и смогла сделать:
https://codepen.io/cassie-codes/pen/0f32cad9b2e2070a11560936857e85fb
Вопрос! Как совместить swup и gsap?
Просто не могу понять принцип :(
Код Swup:
const swup = new Swup({
plugins: [new SwupOverlayTheme({
color: '#000000',
duration: 100,
})]
});
const options = {
cache: true,
};
swup.on('pageView', function() {
dataLayer.push({
event: 'VirtualPageview',
virtualPageURL: window.location.pathname,
virtualPageTitle: document.title
});
});
swup.on('contentReplaced', function() {
swup.options.containers.forEach((selector) => {
});
});
document.addEventListener('swup:contentReplaced', (event) => {<тут скрипты, которые должны не ломаться при переходе>});