Jump to content
GreenSock

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

MennoPP

ShockinglyGreen
  • Posts

    8
  • Joined

  • Last visited

About MennoPP

  • Birthday 04/23/1981

Profile Information

  • Gender
    Male
  • Location
    The Netherlands

MennoPP's Achievements

  1. Thank you all after some tries I have finally fixed it. This code works for me using GSAP + ScrollTrigger + ScrollSmoother + BarbaJS + AlpineJS import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start() import barba from "@barba/core"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollSmoother } from "gsap/ScrollSmoother"; gsap.registerPlugin( ScrollTrigger, ScrollSmoother); function contentAnimation () { gsap.set(".animated_ul_title", { opacity:0, x:-20 }); gsap.to(".animated_ul_title", { duration:.4, delay:0, opacity:1, x:0, scrollTrigger: { trigger: ".animated_ul", start: "top bottom-=400px", } }); } function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); ScrollTrigger.refresh(); }; function galleryScroller(){ const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } function init(){ // do something before the transition starts barba.hooks.before(() => { }); // do something after the transition finishes barba.hooks.after(() => { ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); // scroll to the top of the page barba.hooks.enter(() => { window.scrollTo(0, 0); }); barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); contentAnimation(); } } ] }) } window.addEventListener('DOMContentLoaded', function () { init(); });
  2. Thanks, I still can't get it to work. Added the core code to this pen, but the issue is when navigating between pages... Do not see a option for adding a extra HTML page on CodePen. It works fine on first load (and in en below) just not when I move between pages using BarbaJS. If I remove the ScrollSmoother function all works fine even between BarbaJS page changes. So the issue is somehow with ScrollSmoother not 'resetting'. https://codepen.io/DESIGNfromWITHIN/pen/LYQrjMX
  3. Hello I am using this function to start ScrollSmoother (it's fantatsic BTW!) function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); }; Also added this cleanGSAP function: function cleanGSAP(){ ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; And use BarbaJS code below for page trantions all works fine on first load. But if i navigate to an other page and then back to home (index), the ScrollSmoother functionality does not work and any JS later fails. (if I remove scrollSmootherCreate(); from the code bewlo all works fine as expected) How can I 'reset' ScrollSmoother before entering back to home? barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { scrollSmootherCreate(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { contentAnimation(); }, } ] })
  4. Thank you so much or this. The CleanGSAP helped me get BarbaJS and Scroll trigger working! function galleryScroller(){ ScrollSmoother.create({ smooth: 1, effects: true }); const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } const cleanGSAP = () => { ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; barba.init({ transitions: [ { name: 'index', once() { //siteFirstLoad(); galleryScroller(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { galleryScroller(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, } ] })
  5. Thank you! Indeed the wording could be better... I assumed opacity was watched by default.
  6. Can somebody tell me why flip works but the SVG icons are not transitioning the opacity? (click change to see animation) The CSS position is transitioning using GSAP Flip, but the opacity is not. function animateCryptoIcons() { const state = Flip.getState(".cryptoIcon"); group.classList.toggle("cryptoIconAnimated"); Flip.from(state, { absolute: true, duration: 0.8, stagger: 0.1, ease: "power1.inOut" }); } .cryptoIcon_eur { top: 5%; left: 5%; opacity: 1; } .cryptoIconAnimated .cryptoIcon_eur { top: 25%; left: 55%; opacity: 0; }
  7. This Forum is amazing! Have it working, many thanks. var colorEffect = function(){ gsap.utils.toArray(".colorChange").forEach(function(elem) { var color = elem.getAttribute('data-color'); ScrollTrigger.create({ trigger: elem, start:'top 50%', end:'bottom 50%', onEnter: () => gsap.to('.bgChange', {backgroundColor: color}), onLeave: () => gsap.to('.bgChange', {backgroundColor: 'white'}), onLeaveBack: () => gsap.to('.bgChange', {backgroundColor: 'white'}), onEnterBack: () => gsap.to('.bgChange', {backgroundColor:color}) }); }); };
  8. Hello, I have a small feature I need to get working: Have viewport high sections with on each a client project. The idea is to animate the color of a fixed position sidebar to the client project color that is in view. <section id="#workColorChange0" class="h-screen colorChange" data-client-color"#6a6a6a"> <div class="container flex flex-wrap mx-auto items-center"> <h3>Section 1 content</h3> </div> </section> <section id="#workColorChange1" class="h-screen colorChange" data-client-color"#8ebc22"> <div class="container flex flex-wrap mx-auto items-center"> <h3>Section 2 content</h3> </div> </section> <section id="#workColorChange2" class="h-screen colorChange" data-client-color"#0e0b80"> <div class="container flex flex-wrap mx-auto items-center"> <h3>Section 3 content</h3> </div> </section> I have a basic version working, but have 3 tl. now (one for each scrollTrigger and color) and I am sure this can be done better (also losing the id="workColorChange0". If I set the color in a data-client-color attribute, could I somehow grab that value as a backgroundColor? Maybe use onToggle? My Javascript: var colours = ['#006eab', '#8ebc22', '#0e0b80']; var colorEffect = function(){ gsap.set(".colorChange", { backgroundColor: "#006eab", }); const tl0 = gsap.timeline(); tl.to(".colorChange", { scrollTrigger: { trigger: "#workColorChange0", start: "top center", scrub: true, }, backgroundColor: "#006eab", ease: "none", }); tl.to(".colorChange", { scrollTrigger: { trigger: "#workColorChange1", start: "top center", scrub: true, }, backgroundColor: "#8ebc22", ease: "none", }); tl.to(".colorChange", { scrollTrigger: { trigger: "#workColorChange2", start: "top center", scrub: true, }, backgroundColor: "#0e0b80", ease: "none", }); };
×