Jump to content
GreenSock

2malH

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Everything posted by 2malH

  1. 2malH
    @GreenSock you've nailed it, that was it. 🤦‍♂️ Thanks a lot. I'll try to take it from here. I even managed to kill the ScrollTriggers I intended to. So thanks a lot for that! One last question: Given this site structure with multiple pages and multiple containers each holding different elements I want to animate. What's the best practice to set this up? Should I setup a timeline for each container or one for each page? page1 container--1 container__title container__image container__text container--2 container__title container__image container__text container--3 container__title container__image container__text page2 container--a container__title container__image container__text container--b container__title container__image container__text container--c container__title container__image container__text
  2. 2malH
    @GreenSock, @ZachSaucier I thought that I'd have followed the installation instructions just right but it's not working. :-/ This is how I'm loading GSAP. <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js"></script> <script src="https://polymorph.media/wp-content/themes/polymorph/assets/js/polymorph.min.js"></script> <!-- I've also tried to register the plugin right away in the head section but it didn't remove the errors <script>gsap.registerPlugin(ScrollTrigger);</script> --> </head> polymorph.min.js - this is where I'd like to place the GSAP related code and register the plugin. gsap.registerPlugin(ScrollTrigger); var tl = gsap.timeline(); function initScrollTrigger() { console.log("initScrollTrigger"); if(tl.ScrollTrigger) { tl.ScrollTrigger.kill(); } tl = gsap.timeline({ scrollTrigger: { trigger: ".portfolio--omrfestival", start: "top 70%", end: "top 55%", markers: true, } }); tl.addLabel("animateTitle").fromTo(".portfolio--omrfestival .portfolio__heading", {opacity: 0, x: -50}, {opacity: 1, x: 0, duration: 0.8}); } initScrollTrigger(); window.addEventListener( "sempliceTransitionsDone", function (e) { initScrollTrigger(); }, false ); These are the errors it throws Please gsap.registerPlugin(ScrollTrigger) ScrollTrigger.min.js:10:13807 Uncaught TypeError: can't access property "indexOf", i is undefined C https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js:10 init https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js:10 ScrollTrigger https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js:10 create https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js:10 Aa https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js:10 Timeline https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js:10 timeline https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js:10 initScrollTrigger https://polymorph.media/wp-content/themes/polymorph/assets/js/polymorph.min.js:12 <anonymous> https://polymorph.media/wp-content/themes/polymorph/assets/js/polymorph.min.js:52 Edit: Added the comment that I've also tried to register the plugin right within the head section without success
  3. 2malH
    @GreenSock you're exactly right with point 2. I was literally just calling ScrollTrigger.kill() in hope to destroy the animation instance I've set before. So that's indeed a great starting point for me. @Yannis Yannakopoulos thanks so much for even digging into the Semplice documentation. I know about the SPA script field and I'm using it for a couple of things already. It's basically listening for the event "sempliceAppendContent" and then calls a function containing the script code I can insert in the admin area. But I'd like to code everything locally into a .js file and embedd it. Makes changing things and testing faster. That being said, you're absolutely right I should create a function or class to control the animations. Since I'm quite a novice, I'll have to read some more on how to accomplish this. @ZachSaucier's article is great especially tip #8 seems to be what I'll have to implement. While setting this up I'm running into some other difficulties you might be able to help me with: In the head section after including ScrollTrigger.min.js via CDN I'm including my customJS file which calls gsap.registerPlugin(ScrollTrigger); var tl = gsap.timeline(); function initScrollTrigger() { if(tl.ScrollTrigger) { tl.ScrollTrigger.kill(); } tl = gsap.fromTo(...); ... } initScrollTrigger(); window.addEventListener( "sempliceTransitionOutStart", function (e) { initScrollTrigger(); }, false ); Is this somewhat the right way? Because now it throws me the error "Please gsap.registerPlugin(ScrollTrigger)" which is actually the very first thing I do in the file. I'm kinda lost on how to integrate the whole ScrollTrigger part in an external JS. Edit: Again: I' sorry for not providing a codepen but it's this problem seems to be deeply connected to a lot things, I'm finding it hard to replicate it in a minimal version.
  4. 2malH
    Thanks a lot @Yannis Yannakopoulos. Your answer really helps as it confirms my assumption. I have now found the events the theme dispatches before and after the transitions (it's not barba js but gsap they're using btw) and I'm listening for transitionOutStart (here I want to kill ScrollTrigger and transitionsDone (here I'll have to initialize ScrollTrigger if used on that page). But I don't really know on how to use ScrollTrigger.kill() as it's not orking as expected. This is how I init ScrollTrigger: gsap.registerPlugin(ScrollTrigger); let tl = []; let projects = ['omrfestival', 'mini', 'porsche', 'boa', 'dinnerberlin']; for (i = 0; i < projects.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: ".portfolio--" + projects[i], start: "top 70%", end: "top 55%", } }); tl.addLabel("animateTitle") .fromTo(".portfolio--"+projects[i]+" .portfolio__heading", {opacity: 0, x: -50}, {opacity: 1, x: 0, duration: 0.8}) .addLabel("animatePlane") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__plane", {opacity: 0, scaleX: 0, transformOrigin:'0% 0%', ease: "expo. out"}, {opacity: 1, scaleX: 1, duration: 0.5}, "-=0.3") .addLabel("animateImage") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__image", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateDesc") .fromTo(".portfolio--"+projects[i]+" .portfolio__desc", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateCTA") .fromTo(".portfolio--"+projects[i]+" .portfolio__cta", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2"); } And here's the eventListener (function($) { function exitPage() { console.log("sempliceTransitionOutStart"); if (tl !== undefined) { tl.kill(); console.log("kill ScrollTrigger"); } } function transitionsDone() { console.log("sempliceTransitionsDone"); } window.addEventListener("sempliceTransitionOutStart", exitPage ); window.addEventListener("sempliceTransitionsDone", transitionsDone ); })(jQuery); In the console it show me that the kill section is beeing called but it doesn't destroy it as expected. I've tried both: tl.kill() and ScrollTrigger.kill(). None of them is working. What am I doing wrong? Thanks so much for the help! PS: I know that the code above can be optimized. I'm just strating to get into JS. I think utils.toArray() is what I'll have to look into next, right?
  5. 2malH
    Hi everyone, first of all: Thanks so much for GSAP and all the help you guys are giving here in the forum! I'm blown away by all the possibilities although I just started using it. First time poster, I did my best to search for a similar problem but didn't find anything related, so here I am: As for my problem with ScrollTrigger: If I go to the page that uses ScrollTrigger directly (https://polymorph.media/work/) everything's working fine. But If I navigate between the pages (e.g. go to home and go back or come from a different page) the markers of the elements to be triggered are moved way down. I'm pretty sure the problem is related to the BarbaJS-like page transition the wordpress theme has implemented and that it doesn't calculate the position correctly. As for the transition there's not much I can change about it. So on the GSAP side: Is this something I can possibly fix with ScrollTrigger.refresh() or ScrollTrigger.update()? Sorry for not providing a codepen since this seems to be a theme related issue. One further question: Is it possible to use ScrollTrigger to auto-hide and show the navbar like Headroom.js (https://wicky.nillia.ms/headroom.js/) does? I'd love to replicate this in GSAP so that there's less to worry about since I'm having the same transition problem as with ScrollTrigger.. Edit: Still building the website so I don't mind activating the markers so it visualizes my problem.
×
Login Create Account