2malH

June 9, 2020

@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

June 8, 2020

@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

June 8, 2020

@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.

June 8, 2020

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?

June 7, 2020

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.

Notifications

Messages

2malH

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by 2malH

Problem with killing and reinitialising ScrollTrigger after Single Page App page transition

Problem with killing and reinitialising ScrollTrigger after Single Page App page transition

Problem with killing and reinitialising ScrollTrigger after Single Page App page transition

Problem with killing and reinitialising ScrollTrigger after Single Page App page transition

Problem with killing and reinitialising ScrollTrigger after Single Page App page transition