Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I'm brand new to GSAP and Barba, I have got a basic page transition working with the two, however after the transition scroll trigger seems to break. I've been looking through the forum and see other users have very similar issue to what I have but I cannot find a solution. If either of the pages are accessed directly, scroll trigger works fine. However if either page is navigated to via the barba transition the scroll trigger doesn't work. Using barba views I appear to be able to get scripts to fire post transition, but I cannot work out how to get scroll trigger to reload. When I inspect the element after transition it looks like it's ready to be manipulated (has the inline transform style added to it), but it doesn't animate on scroll. I'm aware this may be a barba issue rather than a GSAP issue, but hopefully someone on the forum has come across this and can help. I have a very basic test pages at the moment (excuse the superfluous loading of every plugin!). First page is: <!DOCTYPE html> <!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]--> <!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]--> <!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]--> <!--[if IE 9]><html lang="en" class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tester 1 - Contemporary Chandeliers</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="tester 1 Description"> <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css"> </head> <body data-barba="wrapper" class="" id="pageTop"> <div class="page"> <div class="stuck--top"> <h1>Don't want this to change</h1> </div><!--/.stuck--top--> <div class="barbaHolder"> <main data-barba="container" data-barba-namespace="tester"> <div class="container purple"> <h4>tester 01</h4> <p> <a href="tester2.php" title="Next">Go to Page Two</a> </p> <div class="box"> </div><!--/.box--> </div><!--container purple--> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="https://unpkg.com/@barba/core"></script> <script src="/assets/js/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> </main> </div><!--/.barbaHolder--> </div><!--/.page--> <script src="/assets/js/application.js"></script> </body> </html> Second page is basically the same apart from the link back: <!DOCTYPE html> <!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]--> <!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]--> <!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]--> <!--[if IE 9]><html lang="en" class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tester 2 - Contemporary Chandeliers</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="tester 2 Description"> <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css"> </head> <body data-barba="wrapper" class="" id="pageTop"> <div class="page"> <div class="stuck--top"> <h1>Don't want this to change</h1> </div><!--/.stuck--top--> <div class="barbaHolder"> <main data-barba="container" data-barba-namespace="tester"> <div class="container purple"> <h4>tester 02</h4> <p> <a href="tester.php" title="Next">Go to Page One</a> </p> <div class="box"> </div><!--/.box--> </div><!--container purple--> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="https://unpkg.com/@barba/core"></script> <script src="/assets/js/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> </main> </div><!--/.barbaHolder--> </div><!--/.page--> <script src="/assets/js/application.js"></script> </body> </html> The application js controlling the transition and scroll trigger is: /*PAGE TRANSITION*/ barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { duration: 0.5, opacity: 0, y: '50px', }); }, enter(data) { gsap.from(data.next.container, { duration: 0.5, opacity: 0, x:'-50px', }); } }], views: [{ namespace: 'tester', beforeLeave(data) { alert('Leaving tester'); }, beforeEnter(data) { alert('Entering tester'); boxRoll(); } }] }); /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.to(box, { scrollTrigger: { trigger: box, toggleActions: "restart", scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: 350, }) }); } boxRoll();
  2. Sure, you can rewrite it with gsap 3, check migration guide The similar examples you can find by chosing filter by Technologies on awwwards site, chose Barba.js, GSAP Animation, Highway.js... filters
  3. @Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });
  4. If the GSAP timeline is not finished, when I load the next/previous post with Barba, it breaks. This is the problematic transition. Can anyone spot what's wrong here? Thank you { name:"next", leave({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { current.container.remove() resolve() } }) const image = current.container.querySelectorAll(".photo") timeline .to(image, { opacity: 0 }, 0) }) }, beforeEnter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const image = next.container.querySelector(".photo img") timeline .to(image, {opacity: 1}, 0) }) }, enter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const charge = next.container.querySelector("#charge") const years = next.container.querySelector(".years") timeline .set(charge, {opacity: 0, x: "-100%"}) .set(years, {scale: 0}) .to(charge, {opacity: 1, x: 0}, 0) .to(years, {scale: 1}, 1) }) } }
  5. Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet. Thanks all for help! And i have another question, about page transitions, shared element transitions between pages. See website reference at link: https://alfacharlie.co/ See the effect of transitions between pages, the softness the animations. I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?
  6. hi, my plan is to play barba.js page layers transition first - and - then animation for a svg logo. but both are start at a time, have tried delay options, but it's not working. or another option i am trying too.. first logo animation plays - and - then the page layer transition.
  7. Hi, What is the best practice for gsap with barba ? Should I kill gsap annim on beforeEnter hook ? Thanks, Best regards
  8. Hi everyone, So i'm using gsap splittext plugin to split sentence into words and lines and then animating words. Everything works fine on first load of a page but when i'm navigating to different page and then get back something weird happens and sentence breaks only on last word. We are using gsap with barba js. Here is the demo of a problem, also i tried to replicate problem on codepen but it is lot of work to integrate barba there to make it more accurate. Screen Recording 2021-08-17 at 12.23.45.mov Here is how it looks when it's inspected Sometimes it works as expected, but most of the time it breaks and breaks
  9. Hello everyone, since a few months I've been working on a wordpress website (with oxygen builder) hosted on digital ocean. Recently I added page transitions thanks to Barbajs and with GSAP I have a swipe up effect. On chrome I have no problem but on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. The website is currently protected on a private server I can't give you access but here is a piece of my js that calls barba and gsap : function video_text_animation() { let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Video Header title ////////////// var childSplit = new SplitText(".bloc_header--header", {type:"lines", linesClass: "bloc_header--header-child"}); var parentSplit = new SplitText(".bloc_header--header", { type: "lines", linesClass: "bloc_header--header-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { tl = gsap.timeline(); tl.addLabel("animateVideo").from(childSplit.lines, { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); } return tl; } function animation_scroll_text() { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Diptyque title ////////////// new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-child"}); new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { gsap.utils.toArray(".dyptique__card-heading--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger2", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateDiptyque").from(section.querySelectorAll(".dyptique__card-heading--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } //////// Content title ////////////// new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-child"}); new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-parent"}); if (size === "big") { gsap.utils.toArray(".bloc_contents--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger3", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateTitle").from(section.querySelectorAll(".bloc_contents--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } return tl; } function add_scripts() { jQuery(document).ready(function ($) { "use strict"; $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/accueil/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/le-mag/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('.center-title').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim').attr({'data-aos-enable': 'true','data-aos': 'slide-up','data-aos-anchor-placement': 'top-bottom','data-aos-easing': 'ease','data-aos-duration': '400','data-aos-offset': '50',}); $('.center-title2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim-02').attr({'data-aos-enable': 'true','data-aos': 'fade',}); $('.diptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.bloc_contents--text').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '200',}); $('.quadriptyque__card_1').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_3').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_4').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card--image').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-once': 'true',}); $('.triptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '200',}); $('.triptyque__card_3').attr({'data-aos-enable': 'true','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '400','data-aos': 'fade',}); $('.triptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.diptyque__card2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('body').addClass('oxygen-aos-enabled'); }); AOS.init({}); window.dispatchEvent(new Event('resize')); } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } // Preload Animation function pageTransition_init() { var tl = gsap.timeline(); tl.set(".footer-main", {display: "none"}); tl.set(".logo-img-pre", {y:100}); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.7, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); tl.to(".logo-img-pre", {duration: 0.7, delay:-0.7 , y:0, opacity:1, ease:"power4",}); tl.to(".loading-screen", {duration: 1, delay:1, height: "100%", bottom: "100%", ease: "power4",}); tl.to(".logo-img-pre", {duration: 0.3, delay:-1, opacity: 0, display:"none"}); return tl; } // Transition Functions function pageTransition() { var tl = gsap.timeline(); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.2, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to(".loading-screen", {duration: 1, height: "100%", bottom: "100%", ease: "Expo.easeInOut",}); return tl; } function load_video() { const list_videos = document.getElementsByTagName("video"); for (var i = 0; i < list_videos.length; i++) { list_videos[i].load(); console.log(list_videos[i].readyState); } } jQuery(document).ready(function ($) { "use strict"; jQuery('html, body').animate({scrollTop:0}); var masterTimeline = new gsap.timeline(); masterTimeline .add(pageTransition_init()) .add(video_text_animation(), "-=1"); $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(1000); done(); } , enter(data) { jQuery('html, body').animate({scrollTop:0}); load_video(); var tl = gsap.timeline(); tl.set("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); } }, ], views: [{ namespace: 'index', beforeEnter(data) { document.body.classList.add("oxy-overlay-header"); add_scripts(); switch_footer(); animation_scroll_text(); video_animation(); }, } }); }); });
  10. Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!
  11. Hi, I've added the below scripts to the header.php file of our website. <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js id='gsap-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollToPlugin.min.js' id='gsap-scroll-js'></script> <script type='text/javascript' src="https://unpkg.com/@barba/core"></script> My HTML and JS is below. I can console.log out from within the functions so I know they're loading however the GSAP does not seem to be. I'm also not getting any errors in console. The website is on wordpress divi theme if this is any help. <div id="intro"> <section class="video-panel" data-section="creative" data-permalink="#" style="right: 50%;"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Projects</span> </h1> </div> </section> <section class="video-panel" data-section="solutions" data-permalink="#"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Client Services</span> </h1> </div> </section> </div> gsap.registerPlugin(ScrollToPlugin); window.addEventListener("load", function(e) { (function onIntroLeave(e) { gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: '50%', ease: "power3.out" }) }) (function onIntroHover(e) { var per = (e.pageX - window.innerWidth / 2) / (window.innerWidth * 2); var dir = Math.min(1, Math.max(-1, e.pageX - window.innerWidth / 2)); var pow = Math.pow(per * 5.5, 2); var right = Math.min(100, Math.max(0, 50 + (50 * pow * dir))) + '%'; gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.out" }) }) (function onIntroClick(e) { intro.removeEventListener('mousemove', onIntroHover); var section = this.dataset.section; var permalink = this.dataset.permalink; if (section === 'creative') { var headerX = '-3em' var right = '0%' var otherVideo = intro.querySelector('.video-panel[data-section="solutions"] video') } else { var headerX = '3em' var right = '100%' var otherVideo = intro.querySelector('.video-panel[data-section="creative"] video') } otherVideo.pause() barba.prefetch('/' + section) gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 0.5, width: '100vw', height: '100vh', ease: "power3.inOut" }) var circle = gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 1, css: { clipPath: 'ellipse(101vw 101vw)' }, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] h2', { duration: 0.5, x: headerX, ease: "power3.inOut" }) circle.eventCallback('onComplete', openPage, [section, permalink]) }) // (function videoLoaded() { // vLoaded++; // if (vLoaded === vCount) { // introLoaded(); // pageLoaded(); // } // }) }); Thanks
  12. Welcome to the forums, @COG Digital. It's pretty tough for us to troubleshoot without a minimal demo. This kinda sounds like it might a Barba issue, like you're not tapping into its lifecycle events properly so that your GSAP code runs when the corresponding elements exist but I'm not sure at all. Once we see a minimal demo, perhaps we'll have more insight. Did you add a console.log() right where your tweens are supposed to be firing just to make absolutely sure that they're even getting executed?
  13. Hi @GNSNTG. Welcome to the forums. It looks like you're using 2 other 3rd party libraries (LocomotiveScroll and Barba.js) - those aren't GreenSock products so we can't really support them here but if you're dynamically loading content into the same page (so it's not actually refreshing the page and going to a new URL that runs the code from the start), make sure you .kill() all your old ScrollTriggers/animations first and then create the new ones and call ScrollTrigger.refresh() to force it to re-calculate all the start/end trigger positions once things are fully loaded and rendered to the screen. If you want to kill ALL of the ScrollTriggers, you can do that like ScrollTrigger.getAll().forEach(t => t.kill()); If you still need help, please provide a minimal demo, hopefully with no 3rd party libraries. But if you do use 3rd party libraries, don't include your whole project - just isolate the issue in the most minimal way possible (a few <div> elements, for example). Happy tweening/scrolling!
  14. Hello Devs, Please someone to kindly help edit this fade in and out code, to slide up and down or swipe left or right page transitions with Gsap + Barba js here's my code. // Animation - Transition function pageTransition() { var tl = gsap.timeline(); tl.to(".main-fade", { duration: .4, ease: "Power0.easeNone", opacity: "0" }); tl.set(".main-fade", { y: 0, opacity: "1" }); tl.set(".loading-screen", { opacity: 0 }); } thanks
  15. Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal. barba.init({ views:[ { namespace: 'detail', beforeEnter(){ } } ], transitions: [ { name: 'general-transition-opacityfade', once({next}){ animationEnter(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ animationEnter(next.container); } }, { name: 'detail', to:{ namespace:['detail'] }, once({next}){ navigation1(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ navigation1(next.container); navin2(next.container); navin3(next.container); } } ] })
  16. Hi guys, I have a generall question while starting to use GSAP with barba. I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together. barba.init({ views: [{ namespace: 'home', afterEnter(data) { initTimeline1(data.next.container); initTimeline2(data.next.container); initTriggeredTween(data.next.container); }, }] }); const initTimeline1 = (next) => { const tl = gsap.timeline({}) .to(next.querySelector('el1'),{'GSAP MAGIC'}) return tl } const initTimeline2 = (next) => { const tl = gsap.timeline({scrollTrigger:{}}) .to(next.querySelector('el2'),{'GSAP MAGIC'}) return tl } const initTriggeredTween = (next) => { next.querySelector('el3').addEventListener('click', () => { gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'}) }) } barba.hooks.beforeEnter( () => { ScrollTrigger.getAll().forEach(trigger => { trigger.kill() }); ScrollTrigger.refresh(true) } ) I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home". But if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks. Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself? And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out? I just read, that killAll is deprecated. Sorry for my English, and the question which may be a little off topic. Many thanks in advance
  17. Here is the link - https://cdpn.io/elsueno/project/editor/XmqJWg Here I'm working on the footer parallax effect from this example - If I apply Barba.js and click navigation "Home", "about" & "Product" then the footer gsap parallax effect as per the link not working properly because Barba not reloading the page and content for the inner page is less compare to the home page. Barba hooks are not handy in this situation because the footer is not included in the Barba container. Can you guys help me?
  18. Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you. Burger menu animation code: function pageTransition() { // Toggle Icone hamburger $(document).ready(function () { $('.barres').click(function () { $('.barres').toggleClass('active'); }) }) // Greensock Animations var timeline = new TimelineMax(); timeline.to(".menu", 0.8, { left: '0%', ease: Expo.easeInOut, delay: 0 }); timeline.staggerFrom(".menu ul li", 0.3, { x: -100, opacity: 0 }, 0.1); timeline.reverse(); $(document).on('click', '.barres', function () { timeline.play(); }); $(document).on('click', 'a', function () { timeline.reverse(); $('.barres').toggleClass('active'); }) } Barba setup: barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); data.current.container.remove(); pageTransition(); await delay(1000); done(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); barba.hooks.enter(() => { window.scrollTo(0, 0); });
  19. Hello, I write in the hope of finding a solution to my problem. I am running a website using Gsap (ScrollTrigger), Barba.Js, LocomotiveScroll. Basically when I perform the first page load, the trigger is well positioned (in the middle of the page as in the first image in attached) and everything works perfectly. The problem comes when I change the page (whatever it is). I don't know why the trigger (I use the first navbar as an example, but consequently they all have the same problem) have an offset (see second image). I extrapolate the part of the code that I think (probably) needs to be revised. // NAVBAR function gsapAnim(){ const bg = gsap.timeline({ scrollTrigger: { trigger: "#HPTrigger", scroller: ".smooth-scroll", start: "center top", end: "bottom top", duration: 1, ease: "power4.out", toggleActions: 'play none reverse none', markers: true } }); bg.to(".bg-navbar", {backgroundColor:"rgba(255,255,255,1)"},0); bg.to(".leftline", {borderLeft:"1px solid rgba(230,230,230,1)"},0); bg.to(".rightline", {borderRight:"1px solid rgba(230,230,230,1)"},0); bg.to(".bottomline", {borderBottom:"1px solid rgba(230,230,230,1)"},0); bg.to(".nav-link", {color:"rgba(0,0,0,1)"},0); bg.to(".icon-bar", {backgroundColor:"rgba(0,0,0,1)"},0); } // TRANSITION AND UPDATE function pageTransitionIn({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' } }); tl .set(loaderInner, { autoAlpha: 0 }) .fromTo(loader, { yPercent: 100 }, {yPercent: 0 }) .fromTo(loaderMask, { yPercent: -80 }, {yPercent: 0 }, 0) .fromTo(transitionText, {autoAlpha:0},{autoAlpha:1},0.25) .to(container, { y: -150}, 0); return tl; } function pageTransitionOut({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' }, // PROBABLY HERE IS THE PROBLEM onStart: () => { window.scrollTo(0, 0); initScript(); } }); tl .to(loader, { yPercent: -100 }) .to(loaderMask, { yPercent: 80 }, 0) .to(transitionText,{autoAlpha:0},0) .fromTo(".comparsa", {y: 100, opacity: 0,},{y: 0, opacity: 1, ease: "power4.out", duration: 3},0.5) .to(".text", { y: "0%", opacity: 1, duration: 2, ease: "power2.out"},0.5) .from(container, { y: 150}, 0); return tl; } // BARBA JS PART function initPageTransitions() { barba.init({ sync:true, /* debug: true, */ /* timeout:7000, */ transitions: [{ name: 'overlay-transition', once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initLoader(); }, async leave(data) { // animate loading screen in pageTransitionIn(data.current); await delay(1000); data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(tl => tl.kill()); scroll.destroy(); initSmoothScroll(data.next.container); await delay(1000); }, async enter(data) { // animate loading screen away pageTransitionOut(data.next); } }] }); } The integration of the 3 libraries I think I did it well, so I don't think the problem is with Barba or LS. It is as if there is a problem resetting the trigger. I hope that any solution to this problem will be of help to other people as well. Thanks in advance.
  20. Hi,

     

    I have used Barba js(latest) in my wordpress website but when page changes the header and video & other elements not showing full. Also the tabs and some elements not working properly.

     

    Can you please help.

     

    Thanks,

    J

  21. Hi, I'm currently working on a website using Gsap ScrollTrigger. What I'm trying to achieve is showing a "previous-next post" button when the user has reached the bottom of the page. Which is working almost ok when the page is not resized. So on the page I have 2 scrollTriggers: 1. A horizontal gallery of images (with a media match) 2. The previous-next button. 1: let slider = document.querySelector('.hor-slide--project'); setTimeout(function(){ ScrollTrigger.matchMedia({ "(min-width: 992px)": function() { gsap.to(slider, { x: () => -(slider.scrollWidth - document.documentElement.clientWidth) + 'px', ease: 'none', scrollTrigger: { trigger: '.hor-slider-container', start: 'top top', //pinReparent: true, invalidateOnRefresh: true, pin: true, // scrub: .25, scrub: 0, // end: () => '+=' + slider.offsetWidth // end: 4000, end: () => slider.scrollWidth, } }); }, }); }, 1); 2: setTimeout(function(){ ScrollTrigger.create({ trigger: '.single-project', start: 'bottom bottom+=50px', //end: 'bottom bottom', invalidateOnRefresh: true, //markers: true, onEnter: self => { gsap.to('.prev-next', 1, {y: '-100%', ease: Expo.easeOut}) }, onLeaveBack: self => { gsap.to('.prev-next', .5, {y: '0', ease: Expo.easeOut}) } }); }, 100); I'm using setTimeout because in addition to gsap scrollTrigger I'm using Barba.js, and I need to delay, but it doesn't seem to be the problem, I removed the setTimeout and the problem still occurs. For the second scrollTrigger, I have used onEnter and onLeaveBack, this might not be the best way but that's the only way I found so far (I might be part of the problem), so 50px before the bottom of the '.single-project' block reach the bottom of the viewport (start: 'bottom bottom+=50px'), show the prev-next, otherwise hide it. The problem is that when I resize the window from mobile (< 992px) to desktop (> 992px), the prev-next button is now showing to early, before I reach the bottom of the page. Step to reproduce the bug: 1. Load the page on desktop, scroll to the bottom, the prev-next is showing (great) 2. Resize the window (< 992px), the first horizontal gallery scroll is "killed", scroll to the bottom, the prev-next is still showing at the right time (amazing) 3. Re-resize the window (> 992px), the first horizontal gallery is "recreated", and now if you scroll around the page, you can see prev-next showing too early, before you reached the end of the page. I tried refresh and also invalidateOnRefresh true or false, without success, it doesn't want to work. I guess I'm doing something wrong, probably the way I try to show the prev-next, using onEnter and onLeaveBack. Must be a more clever way to do that. Thank you.
  22. Hello, a few years ago I worked a lot with GSAP, so 2017/2018. I'm currently building a smaller project where I want to load content via ajax, there are elements in it that I want to pick up and put in a timeline for a transition and I'm getting desperate ^^. I had done something similar a few years ago, but barba.js was involved - its own challenge - but this is overkill and there are promises and async await - so I thought. On the net and here in the forum is not very much to find on this and the little I have tried everything without success. Sorry I don't have a CodePen example yet, but and am now at the point that I have to ask: Does this work at all? Thanks a lot
  23. Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.
  24. Hi all, I'm building a site that uses Barba.js to handle the page transitions. All is going well but I'm running into a small issue with my navigation timeline that only works on first page load. After I navigate to another page the barba transitions fire and the new page loads, but my timeline seems to stop working after that. I've included the important parts of the code I use, I suspect I need to set the reversed state of the timeline somewhere inside the Barba function, but after trying different approaches I still haven't found the solution. Update: reworked the Barba code based on their v2 version. All help is appreciated!
  25. Hi All… Trying to learn GSAP using Barba – I’m self-taught so constantly running into issues and thanks for this forum it has helped in many ways. I am hoping this question can be answered without a demo, because I am working in a dynamic environment and my issue is related to navigating from project to project, which technically is the same layout within the system, just loading in the content dynamically based on the project. To set this up, using JS & HTML, I have the latest versions of GSAP, ScrollTrigger, & Barba plugged up and the page transitions work from one page type to the next – took some time, but slowly figured it out. My issue now, are the project pages of the site within the portfolio section. The first time you navigate to a project, the page transitions and tl animations work as I created. The problem is when I navigate from one project page to the next project, on leave the page transitions out as expected, but then nothing is happening on enter. The page transition and tl animation don’t seem to reload. I have tried kill, reset, & clearProps – it could be the placement, but tried it many places with no luck. Based on the console logs everything is firing based on the sequence I setup, but I feel the whole page/timelines/ScrollTrigger needs to be reset/restart. Also, not sure where to place the reset – within Barba I am using both views and transitions. It is just the page is loading on to itself so how do I reset everything, so it starts all over and goes through all the animations when you go to the next project page. Any direction or link to other examples would be helpful.
×