treadway

Hey Jack, sorry for the delay I had a deliverable today and was slammed till. So, yeah. the bug was mine and was just tracking back though GSAP where the call originated in an onComplete. Derrr. It all worked out in the end. Thanks for your help! ...always. —Chris

Hey jack got it basically working! ..unpinned the scroller and manipulated a different element remove the weirdness. So yeah, trying to alter the the "scroller" and / or the "trigger" seems to be a bad thing. Nesting things that you want to manipulate further down is best. Also just an FYI that "splice" error (shown above) was real whenever you are trying to tween the trigger element (from what I have seen). As always thanks so much for the help and the dope framework that has kept me making smooth flowing interactive pieces for, I believe, over a decade.

Yeah that makes sense, I tested a solution like this and was seeing the same issue. Perhaps I made a mistake, I have been racking the hours. I will try again fresh. Thanks Jack! Sorry for the confusion.

Yeah the secondary scroll bar was just a miss, sorry this is a hacky rip out of my full code. Yeah, I am really sleep deprived also. So yes all I am tryin to do is shrink my container (scroller) as I scroll. I would also like the internal content ("trigger") to not just sit still verticalls but move with the shrinking container. So you are still scrolling through the content. Yes a simple y tween seems like it would work (the first way I tried to do this, see code below) but it does not work as expected. I keeping hoping to rubber duck myself here, but no luck... I updated the codepen with the y tween (I am not sure how to see errors there). You can see the markers here and it works closely to the desired point. I could use this but I would like the scrolling to stop when the end marker get to the scroller-end marker. scrolling with resize code let tl1 = gsap.timeline(); tl1.pause(); tl1.to("#page-" + newPageNumber + " .question-container", { height: scrollHeight, }, "scrollLabel"); tl1.to("#page-" + newPageNumber + " .choices-container", { y: -scrollAmount, }, "scrollLabel"); this.scrollAni = ScrollTrigger.create({ animation: tl1, trigger: "#page-" + newPageNumber + " .choices-container", scroller: "#page-" + newPageNumber + " .question-container", scrub: true, pin: true, markers: true, start: "top top", end: "bottom " + scrollHeight +"px", }); error zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'splice' of undefined at ScrollTrigger.self.refresh (ScrollTrigger.js:1131) at Tween.<anonymous> (ScrollTrigger.js:1313) at _callback (gsap-core.js:939) at _renderZeroDurationTween (gsap-core.js:509) at Tween.render (gsap-core.js:3073) at Timeline.render (gsap-core.js:2133) at _lazySafeRender (gsap-core.js:192) at Array.updateRoot (gsap-core.js:2564) at _tick (gsap-core.js:1252) at ZoneDelegate.invokeTask (zone-evergreen.js:399)

Currently, as you scroll the "Scroller" (container here with a white rounded border) the bottom moves up from what would be out of view to stop once it is in view (plus padding) Then the "Trigger" (div with all the repeating language buttons) scrolls down where it finishes when you reach the end. I am trying to get the "Trigger" to scroll up like normal, and the "Scroller" bottom to follow the bottom of the "Trigger" up. Ending in a nice little white rounded border rectangle in the view having scrolled the "Trigger" simultaneously.

Sorry to jump in here once again, but I need some help before I am bald. I am using ScrollTrigger trying to create what essentially would be a sort of fixed header that the Trigger content rolls up into (I also want to add some inertia fun later). So I am trying to shrink the height of the content Scroller container as the Trigger content scrolls up showing the bottom of the Trigger content at the bottom of the Scroller container when it comes into view. I have tried many different methods but none seem to get it right. Any thoughts or ideas would be of great help (you guys always seem to come dropping science when in need, thanks) ... (Also while my nose is brown, ScrollTrigger is absolutely DOPE, thank you! (once again)) Codepen might be easier to visually understand ay 0.5x or on Codepen. Thanks! —Treadway

hey y'all, I am getting errors from the gsap-utils during build after upgrade to GSAP 3 (latest version 3.05) ERROR in node_modules/gsap/types/gsap-utils.d.ts(98,76): error TS1144: '{' or ';' expected. node_modules/gsap/types/gsap-utils.d.ts(100,97): error TS1144: '{' or ';' expected. node_modules/gsap/types/gsap-utils.d.ts(101,120): error TS1144: '{' or ';' expected. Any ideas on why this may be happening and hopefully a fix?

This is what I get... ERROR in src/app/app.component.ts(22,3): error TS1248: A class member cannot have the 'const' keyword.

Ahhhh YES! It was Tree Shaking. Ok so adding the desired plugins from "bonus-for-npm-users" in an assets folder. No need for any addition to the angular.cli. Importing with "import * as DrawSVGPlugin from "..assets folder"" in the component that is is used in and the root component. And adding "plugins = [ScrambleTextPlugin, DrawSVGPlugin];" to the root component (no "const" as it causes an error). And bingo all is well! (thought it may be helpful for a list of what worked.) Thanks so much for your help Jack & Blake, Cheers!

Hey y'all, I am trying to get the club plugins (drawSVG & ScrambleText) to work in an Angular app (5.2). GSAP was added with NPM and the plugins were added to an assets folder. I also added the paths in the angular.cli (after some failed tests). There is no error on the plugin import but neither plugin works. The scrambleText (#inititalizing) does show a runtime error "invalid scrambleText tween value: [object Object]" I have loaded multiple ways (just in case) import DrawSVGPlugin from "../../assets/js/gsap/DrawSVGPlugin"; import ScrambleTextPlugin from "../../assets/js/gsap/ScrambleTextPlugin"; //and import * as DrawSVGPlugin from "../../assets/js/gsap/DrawSVGPlugin"; import * as ScrambleTextPlugin from "../../assets/js/gsap/ScrambleTextPlugin"; I have tried set and to & fromTo I have tried just the id and nativeElement TweenMax.set("#line-two", {drawSVG:"0%"}); TweenMax.to("#line-two", 1, {delay: 5, drawSVG:"100%"}); TweenMax.fromTo("#line-two", 1, {drawSVG:"0%"}, {delay: 5, drawSVG:"100%"}); TweenMax.fromTo(this.lineTwo.nativeElement, 1, {drawSVG:"0%"}, {delay: 5, drawSVG:"100%"}); TweenMax.to("#inititalizing", 3, {scrambleText:{text:"inititalizing...", chars:"10", revealDelay:0.5, speed:0.3}}); TweenMax.fromTo("#dot", .75, {transformOrigin:"50% 50%", scaleX:0, scaleY:0}, {delay: 5, scaleX:1, scaleY:1}); ...Also the simple #dot animation at the end works fine. And all the #line-two are not in the code together at the same time, just all here to display the different tests. Any clue to why these would be failing to animate? (definitely a plugin only issue)