Men At Code

Hey @GreenSock @ZachSaucier, thank you for your answer! The problem was exactly what Jack explained, the height of the body was missing and, as a consequence, nothing scrolled. I've added in the calculations of the scroll that setting and now it works perfectly. ?

Hello, I've applied ScrollTrigger to the whole page, in order to achieve a smooth effect. When I remove markers or set them to false, the page stays fixed on first viewport and doesn't scroll; while with markers active (true) it works perfectly. I was wondering if there's some setting that i'm missing or some problems in the configuration. This is how i initialized it: gsap.to('.container', { y: () => -(this.scrollService.height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { id: "scrollTrigger", start: "top top", end: document.querySelector(".container").clientHeight, scrub: 1, invalidateOnRefresh: true, refreshPriority: 1, markers: true } }); as soon as i set markers false, it breaks. If anyone knows what's wrong, it'd be great, cause i've done some research but can't figure out why markers need to be active. Thank you very much

@Ihatetomatoes Thank you so much, it works like a charm! You rock!!!! ?

Thank you. Actually I decided to upgrade the whole project to version 3, cause it's wonderful

Hello everyone. What i'm trying to achieve is to have a smooth scroll effect applied to a .main div that wraps the whole page. The effect i reached is great but in the moment in which i add triggers inside, the position of them is wrong and seems affected by the smooth effect in a wrong way. This is the code for the page smoothing part: gsap.to(".container", { yPercent: -100, y: "100vh", scrollTrigger: { scrub: 1, trigger: ".container", start: "top top", end: document.querySelector(".container").clientHeight, markers: true } }) I set the yPercent as the -100% of the page and had to add also a y property to "100vh" in order to remove from the calculation the px height of the viewport that was in excess. The .container is a relative positioned element that wraps everything and is wrapper by a .main div that is positioned in fixed and with overflow hidden. This parts gives no problems. But, when i insert a simple trigger (which is in this case a relative positioned tag p inside the page), it places the trigger way down and while i scroll it moves too smoothly up or down. If the smooth code is removed, the trigger works perfectly, i have problems only when i match the trigger and the smooth. This is the code of the trigger gsap.to(".bg", { duration: 0.5, autoAlpha: 0, scrollTrigger: { toggleActions: "play complete none reverse", trigger: ".trigger", start: "top top", markers: {startColor: "pink", endColor: "pink", fontSize: "12px"} } }) Thank you in advance for the help.

import { Component, OnInit } from '@angular/core'; import $ from "jquery"; import { TimelineMax, Power1, Power3 } from "gsap/all"; import SplitText from "./../../../assets/libs/gsap-bonus/SplitText"; Here it is

Hello Zach. thank you for the answer. Unfortunately i'm using the v2 of gsap, cause i'm working on an old project and right now I can't update to v3. I've used, as a consequence, the doc procedures of v2, but i get the errors i've listed before.

Hello. I'm importing the Splittext js file, as explain on documentation https://greensock.com/docs/v2/NPMUsage?_fromLogout=1 , on an Angular environment. So i've: Insert the gsap-bonus package inside src folder imported in component using import SplitText from "./gsap-bonus/SplitText"; It generates this error though: Failed to compile. ./src/assets/libs/gsap-bonus/SplitText.js Module not found: Error: Can't resolve 'gsap/TweenLite.js' in '/Users/federica/Desktop/menatcode2020-menatcode-landing/src/assets/libs/gsap-bonus' So i've tried to import the SplitText.js file inside the UMD folder and it doesn't fails to compile but it throws an error on console: ERROR TypeError: _doc.createElement is not a function at _splitRawText (SplitText.js:423) at _split (SplitText.js:503) at _split (SplitText.js:496) Anyone could help me understand what's missing in the process? Thank you in advance