profile
viewpoint

issue closedgreensock/GSAP

InertiaPlugin file is missing from build npm package

I was trying to use InertiaPlugin via

import { InertiaPlugin } from "gsap/InertiaPlugin"

but got errors related to resolving this. Upon digging further it seems that there is no related file for this in node_modules/gsap, I tried clean installing them several times, but I always end up with following files. I looked in all.js and it seems that InertiaPlugin is commented out under "Bonus Exports". Perhaps documentation should reflect how to import this plugin correctly?

Screenshot 2020-11-06 at 13 20 38

closed time in 18 days

IljaDaderko

issue commentgreensock/GSAP

InertiaPlugin file is missing from build npm package

Ah, missed that it was premium, no worries.

IljaDaderko

comment created time in 18 days

issue commentgreensock/GSAP

InertiaPlugin file is missing from build npm package

Hey Ilja. The InertiaPlugin is a premium Club GreenSock plugin (Shockingly Green or above). Are you a Club GreenSock member? If so you can install GSAP via the GreenSock private NPM registry or via the .tgz file downloaded from the GreenSock website as our installation docs and video cover and the InertiaPlugin and other Club GreenSock plugins will be included.

IljaDaderko

comment created time in 18 days

issue openedgreensock/GSAP

InertiaPlugin file is missing from build npm package

I was trying to use InertiaPlugin via

import { InertiaPlugin } from "gsap/InertiaPlugin"

but got errors related to resolving this. Upon digging further it seems that there is no related file for this in node_modules/gsap, I tried clean installing them several times, but I always end up with following files. I looked in all.js and it seems that InertiaPlugin is commented out under "Bonus Exports". Perhaps documentation should reflect how to import this plugin correctly?

Screenshot 2020-11-06 at 13 20 38

created time in 18 days

issue commentgreensock/GSAP

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

@ZachSaucier Thanks. This was done to give the client a workable element in the visual page builder in wordpress. I agree it is odd, but without it the SVG cannot be selected easily. It is a QoL thing for the client. I will try to eliminate the object thing and get back to you.

rezoan

comment created time in 19 days

issue commentgreensock/GSAP

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

Why would you have an SVG inside of an object like that? That doesn't make much sense.

Removing the object and correcting for that in the JS, it works fine.

rezoan

comment created time in 20 days

issue commentgreensock/GSAP

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

@ZachSaucier You can find the SVG image at https://mediaryte.info/dev/adk20/capabilities/ For your reference : https://mediaryte.info/dev/adk20/wp-content/uploads/2020/10/two-shot1b.svg

rezoan

comment created time in 20 days

issue commentgreensock/GSAP

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

Hey rezoan. Can you please provide the SVG that you're trying to animate? A minimal demo would be extremely helpful.

Side notes:

  • We highly recommend using the GSAP 3 syntax which is sleeker and allows you to use new features like GSAP's defaults which can help write this code much more efficiently. It's easy to upgrade.
  • Most likely you don't need jQuery, especially not for your tween targets.
  • You're using delay to sequence things in your timeline. We recommend using the position parameter instead.
  • I think you'd learn a lot from my article about animating efficiently.
  • Most likely you don't need to do all of the calculations that you're doing to get the origins though without seeing your end goal I can't say for sure.
rezoan

comment created time in 20 days

issue openedgreensock/GSAP

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

I am trying to animate an SVG image. From below code when its firingtimeline.play(); i am seeing lots of console error saying:

gsap.min.js?ver=5.5.3:10 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at ud (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:48028)
    at PropTween._renderSVGTransforms [as r] (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:56768)
    at PropTween._renderPropTweens [as r] (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:38749)
    at Tween.render (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:34387)
    at da (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:1932)
    at _initTween (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:31206)
    at Ca (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:4252)
    at Tween.render (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:34107)
    at Timeline.render (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:23333)
    at Timeline.render (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js?ver=5.5.3:10:23333)

Below is the animation code:

 var timeline = new TimelineMax( { paused: true, repeat: 50, repeatDelay: 4, data: { autoplay: true } } );
						var svgObj = document.getElementById( "obj-two-shot" );
            var svgObjContentDoc = svgObj.contentDocument;
  					//var svgObjContentDocFirstSVG = svgObj.contentDocument.documentElement;
						var svg =	jQuery(svgObjContentDoc).find( "#svg-two-shot" );
            if ( svg.length > 0 ) {
                var liquidSpeed = 2,
                    anchorBounds = jQuery(svg).find( "#pour-anchor" )[ 0 ].getBBox(),
                    pour1Outer1Bounds = jQuery(svg).find( "#pour-1-outer-1 g > path" )[ 0 ].getBBox(),
                    pour1Outer2Bounds = jQuery(svg).find( "#pour-1-outer-2 g > path" )[ 0 ].getBBox(),
                    pour1Middle1Bounds = jQuery(svg).find( "#pour-1-middle-1 g > path" )[ 0 ].getBBox(),
                    pour1Middle2Bounds = jQuery(svg).find( "#pour-1-middle-2 g > path" )[ 0 ].getBBox(),
                    pour1Inner1Bounds = jQuery(svg).find( "#pour-1-inner-1 g > path" )[ 0 ].getBBox(),
                    pour1Inner2Bounds = jQuery(svg).find( "#pour-1-inner-2 g > path" )[ 0 ].getBBox(),
                    pour2Outer1Bounds = jQuery(svg).find( "#pour-2-outer-1 g > path" )[ 0 ].getBBox(),
                    pour2Outer2Bounds = jQuery(svg).find( "#pour-2-outer-2 g > path" )[ 0 ].getBBox(),
                    pour2Middle1Bounds = jQuery(svg).find( "#pour-2-middle-1 g > path" )[ 0 ].getBBox(),
                    pour2Middle2Bounds = jQuery(svg).find( "#pour-2-middle-2 g > path" )[ 0 ].getBBox(),
                    pour2Inner1Bounds = jQuery(svg).find( "#pour-2-inner-1 g > path" )[ 0 ].getBBox(),
                    pour2Inner2Bounds = jQuery(svg).find( "#pour-2-inner-2 g > path" )[ 0 ].getBBox(),
                    pour3Outer1Bounds = jQuery(svg).find( "#pour-3-outer-1 g > path" )[ 0 ].getBBox(),
                    pour3Outer2Bounds = jQuery(svg).find( "#pour-3-outer-2 g > path" )[ 0 ].getBBox(),
                    pour3Middle1Bounds = jQuery(svg).find( "#pour-3-middle-1 g > path" )[ 0 ].getBBox(),
                    pour3Middle2Bounds = jQuery(svg).find( "#pour-3-middle-2 g > path" )[ 0 ].getBBox(),
                    pour3Inner1Bounds = jQuery(svg).find( "#pour-3-inner-1 g > path" )[ 0 ].getBBox(),
                    pour3Inner2Bounds = jQuery(svg).find( "#pour-3-inner-2 g > path" )[ 0 ].getBBox(),
                    pour1Outer1OriginX = anchorBounds.x - pour1Outer1Bounds.x,
                    pour1Outer1OriginY = anchorBounds.y - pour1Outer1Bounds.y,
                    pour1Outer2OriginX = anchorBounds.x - pour1Outer2Bounds.x,
                    pour1Outer2OriginY = anchorBounds.y - pour1Outer2Bounds.y,
                    pour1Middle1OriginX = anchorBounds.x - pour1Middle1Bounds.x,
                    pour1Middle1OriginY = anchorBounds.y - pour1Middle1Bounds.y,
                    pour1Middle2OriginX = anchorBounds.x - pour1Middle2Bounds.x,
                    pour1Middle2OriginY = anchorBounds.y - pour1Middle2Bounds.y,
                    pour1Inner1OriginX = anchorBounds.x - pour1Inner1Bounds.x,
                    pour1Inner1OriginY = anchorBounds.y - pour1Inner1Bounds.y,
                    pour1Inner2OriginX = anchorBounds.x - pour1Inner2Bounds.x,
                    pour1Inner2OriginY = anchorBounds.y - pour1Inner2Bounds.y,
                    pour2Outer1OriginX = anchorBounds.x - pour2Outer1Bounds.x,
                    pour2Outer1OriginY = anchorBounds.y - pour2Outer1Bounds.y,
                    pour2Outer2OriginX = anchorBounds.x - pour2Outer2Bounds.x,
                    pour2Outer2OriginY = anchorBounds.y - pour2Outer2Bounds.y,
                    pour2Middle1OriginX = anchorBounds.x - pour2Middle1Bounds.x,
                    pour2Middle1OriginY = anchorBounds.y - pour2Middle1Bounds.y,
                    pour2Middle2OriginX = anchorBounds.x - pour2Middle2Bounds.x,
                    pour2Middle2OriginY = anchorBounds.y - pour2Middle2Bounds.y,
                    pour2Inner1OriginX = anchorBounds.x - pour2Inner1Bounds.x,
                    pour2Inner1OriginY = anchorBounds.y - pour2Inner1Bounds.y,
                    pour2Inner2OriginX = anchorBounds.x - pour2Inner2Bounds.x,
                    pour2Inner2OriginY = anchorBounds.y - pour2Inner2Bounds.y,
                    pour3Outer1OriginX = anchorBounds.x - pour3Outer1Bounds.x,
                    pour3Outer1OriginY = anchorBounds.y - pour3Outer1Bounds.y,
                    pour3Outer2OriginX = anchorBounds.x - pour3Outer2Bounds.x,
                    pour3Outer2OriginY = anchorBounds.y - pour3Outer2Bounds.y,
                    pour3Middle1OriginX = anchorBounds.x - pour3Middle1Bounds.x,
                    pour3Middle1OriginY = anchorBounds.y - pour3Middle1Bounds.y,
                    pour3Middle2OriginX = anchorBounds.x - pour3Middle2Bounds.x,
                    pour3Middle2OriginY = anchorBounds.y - pour3Middle2Bounds.y,
                    pour3Inner1OriginX = anchorBounds.x - pour3Inner1Bounds.x,
                    pour3Inner1OriginY = anchorBounds.y - pour3Inner1Bounds.y,
                    pour3Inner2OriginX = anchorBounds.x - pour3Inner2Bounds.x,
                    pour3Inner2OriginY = anchorBounds.y - pour3Inner2Bounds.y;
							 //debugger;
              //var pourOneStartDefff = document.createElement("#pour-1-start defs > *");
              //var pourOneStartDeffff = document.createElement(jQuery(svg).find( "#pour-1-start defs > *" ));
              //var pourOneStartDef = jQuery(svg).find( "#pour-1-start defs > *" )[0];
                timeline.add( [
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-start defs > *" )[0], liquidSpeed * 0.25, { x: 0, y: 0 }, { x: "100%", y: -4, ease: Power1.easeIn } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-start defs > *" )[0], liquidSpeed * 0.25, { x: 0, y: 0 }, { x: "-90%", y: "100%", ease: Power1.easeIn } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-start defs > *" )[0], liquidSpeed * 0.25, { x: 0, y: 0 }, { x: "-83%", y: "-100%", ease: Power1.easeIn } )
                ] );

                timeline.add( [
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-box defs > *" )[0], liquidSpeed, { x: 0, y: 0 }, { x: 150, y: 0, ease: Power1.easeIn } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-box defs > *" )[0], liquidSpeed, { x: 0, y: 0 }, { x: -100, y: 100, ease: Power1.easeIn } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-box defs > *" )[0], liquidSpeed, { x: 0, y: 0 }, { x: -75, y: -110, ease: Power1.easeIn } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-outer-1 defs > *" )[0], liquidSpeed * 0.75, { rotation: 0, transformOrigin: pour1Outer1OriginX + " " + pour1Outer1OriginY }, { rotation: 40, ease: Sine.easeIn, delay: liquidSpeed * 0.33 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-outer-2 defs > *" )[0], liquidSpeed * 0.75, { rotation: 0, transformOrigin: pour1Outer2OriginX + " " + pour1Outer2OriginY }, { rotation: -40, ease: Sine.easeIn, delay: liquidSpeed * 0.33 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-middle-1 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour1Middle1OriginX + " " + pour1Middle1OriginY }, { rotation: 45, ease: Sine.easeIn, delay: liquidSpeed * 0.5 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-middle-2 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour1Middle2OriginX + " " + pour1Middle2OriginY }, { rotation: -45, ease: Sine.easeIn, delay: liquidSpeed * 0.5 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-inner-1 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour1Inner1OriginX + " " + pour1Inner1OriginY }, { rotation: 38, ease: Sine.easeIn, delay: liquidSpeed * 0.66 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-1-inner-2 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour1Inner2OriginX + " " + pour1Inner2OriginY }, { rotation: -38, ease: Sine.easeIn, delay: liquidSpeed * 0.66 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-outer-1 defs > *" )[0], liquidSpeed * 0.75, { rotation: 0, transformOrigin: pour2Outer1OriginX + " " + pour2Outer1OriginY }, { rotation: 40, ease: Sine.easeIn, delay: liquidSpeed * 0.33 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-outer-2 defs > *" )[0], liquidSpeed * 0.75, { rotation: 0, transformOrigin: pour2Outer2OriginX + " " + pour2Outer2OriginY }, { rotation: -60, ease: Sine.easeIn, delay: liquidSpeed * 0.33 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-middle-1 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour2Middle1OriginX + " " + pour2Middle1OriginY }, { rotation: 45, ease: Sine.easeIn, delay: liquidSpeed * 0.5 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-middle-2 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour2Middle2OriginX + " " + pour2Middle2OriginY }, { rotation: -65, ease: Sine.easeIn, delay: liquidSpeed * 0.5 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-inner-1 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour2Inner1OriginX + " " + pour2Inner1OriginY }, { rotation: 38, ease: Sine.easeIn, delay: liquidSpeed * 0.66 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-2-inner-2 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour2Inner2OriginX + " " + pour2Inner2OriginY }, { rotation: -58, ease: Sine.easeIn, delay: liquidSpeed * 0.66 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-outer-1 defs > *" )[0], liquidSpeed * 0.75, { rotation: 0, transformOrigin: pour3Outer1OriginX + " " + pour3Outer1OriginY }, { rotation: 50, ease: Sine.easeIn, delay: liquidSpeed * 0.33 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-outer-2 defs > *" )[0], liquidSpeed * 0.75, { rotation: 0, transformOrigin: pour3Outer2OriginX + " " + pour3Outer2OriginY }, { rotation: -40, ease: Sine.easeIn, delay: liquidSpeed * 0.33 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-middle-1 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour3Middle1OriginX + " " + pour3Middle1OriginY }, { rotation: 55, ease: Sine.easeIn, delay: liquidSpeed * 0.5 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-middle-2 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour3Middle2OriginX + " " + pour3Middle2OriginY }, { rotation: -45, ease: Sine.easeIn, delay: liquidSpeed * 0.5 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-inner-1 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour3Inner1OriginX + " " + pour3Inner1OriginY }, { rotation: 48, ease: Sine.easeIn, delay: liquidSpeed * 0.66 } ),
                    TweenMax.fromTo( jQuery(svg).find( "#pour-3-inner-2 defs > *" )[0], liquidSpeed, { rotation: 0, transformOrigin: pour3Inner2OriginX + " " + pour3Inner2OriginY }, { rotation: -38, ease: Sine.easeIn, delay: liquidSpeed * 0.66 } )
                ] );
            }
						
				timeline.play();

created time in 20 days

pull request commentgreensock/GSAP

Allow null as eventCallback type

Thanks for pointing this out. We'll get it resolved in the next release.

IljaDaderko

comment created time in a month

PR opened greensock/GSAP

Allow null as event callback type

closes #422

+1 -1

0 comment

1 changed file

pr created time in a month

issue openedgreensock/GSAP

[Typescript] eventCallback does not allow 'null'

According to documentation of eventCallback https://greensock.com/docs/v3/GSAP/Timeline/eventCallback() it should allow null as callback value to delete associated event, however types do not allow this and only gsap.Callback is allowed.

created time in a month

issue commentgreensock/GSAP

Typescript issue with ScrollTrigger

Good catch. This is an error in the declaration file. In /types/scroll-trigger.d.ts the ease for SnapVars should be ease?: string | EaseFunction;.

xposedbones

comment created time in 2 months

issue openedgreensock/GSAP

Typescript issue with ScrollTrigger

Everything works great with Typescript but I can't add an ease to the snap property inside ScrollTrigger.

Running this

ScrollTrigger.create({
  animation: this.tl,
  trigger: this.viewport,
  start: 'center center',
  end: `+=${window.innerHeight * 4}`,
  pin: true, 
  scrub: .75,
  snap: {
    snapTo: 'labels',
    duration: {min: 0.2, max: 1},
    ease: 'power4.inOut',
    delay: 1
  },
  anticipatePin: 1
});

gives me this error

(property) gsap.plugins.ScrollTriggerInstanceVars.snap?: number | number[] | "labels" | gsap.plugins.SnapFunc | gsap.plugins.SnapVars
Type '{ snapTo: "labels"; duration: { min: number; max: number; }; delay: number; ease: string; }' is not assignable to type 'number | number[] | "labels" | SnapFunc | SnapVars'.
  Types of property 'ease' are incompatible.
    Type 'string' is not assignable to type 'Ease'.ts(2322)

According to the documentation, this should work.

created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Ohk Thanks for your support

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Sorry, we do not have the capacity to debug entire projects like that for free.

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

https://github.com/shreyas-1997/Angular-Development you can check it from here code if you want

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Please go through the GSAP installation docs.

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

image see this after installing gsap 3 as per you said i imported this way import { gsap} from "gsap"; import { isPlatformBrowser, isPlatformServer } from '@angular/common'; import { TweenMax,Power2 } from "gsap/TweenMax";

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

It's just a method so you can use that if statement anywhere to my knowledge. But I've never used Angular Universe before so perhaps that's not true.

Regardless this issue is not an issue with GSAP and you haven't provided a way for us to test anything so we can only do so much in helping.

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

I installed to the gsap 3 but how can i add that function in isplatform browser because i am calling that function on wheelevent

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

some of the functionality of gsap2 is not working on gsap 3

What functionality is that? GSAP 3 has a smaller file size, a sleeker API, and a bunch of new features. Why would you want to continue using the old version?

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

i know i am using old version but some of the functionality of gsap2 is not working on gsap 3 thats why i am not using gsap3

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

It looks like you're loading the old version of GSAP. Uninstall it and simply install gsap:

npm install gsap
shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

image i am getting this error at the time of import gsap

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Hey ZachSaucier Thanks for your help but i am calling the mousewheel event form html to component see the line no 25 image and the function n type script is on line number 628 image

Then can you please help .how can integrate this

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Hey Shreyas. As Robak08 said, it's best to make sure that GSAP only runs when a client process (browser) is available.

First things first though: There's no reason to import TweenMax, Power2, or TimelineMax into your project. Just use the GSAP 3 formatting in which case all you need to import is gsap. For more info about that, see the GSAP 3 migration guide.

To make sure that the GSAP doesn't run when there's no client process, it looks like Angular Universal has a isPlatformBrowser method that you can use as this article covers. I think you use it like so:

import { isPlatformBrowser } from '@angular/common';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; // Whatever plugin(s) you need import this way

// ...

if (isPlatformBrowser(this.platformID)) { // Make sure the client process exists before registering and using
  gsap.registerPlugin(ScrollTrigger);
  // ...
}
shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Thanks dude i will definelty try this but actually i am callling that function on wheelevent and in that function Tweenmax is used when i comment it than it works fine but when i uncomment than same issue .. i just want to say it not only the matter of import but also function

shreyas-1997

comment created time in 2 months

issue commentgreensock/GSAP

Issue on Server Side Rendering

Since I haven't used Angular at all I can only try to point You in right direction. You might want to initiate (import) plugin only after DOM is created - lifecycle method might be ngOnInit() for Angular. Ex. in Svelte u can use onMount lifecycle. Hope this helps.

shreyas-1997

comment created time in 2 months

issue openedgreensock/GSAP

Issue on Server Side Rendering

hello Sir! I have Developed a website in angular using gsap for the animations and much more and also it's work properly on CSR(Client Side Rendering).But i want to Rendered this app on SSR(Server Side Rendering) because of SEO purpose..for that i used angular universal .After using angular universal i am facing one issue i.e.. (intermediate value)(intermediate value).getBoundingClientRect is not a function.

I am getting this error only on SSR by using angular universal. Please guide or help me to fix this issue because i am working around since 2 weeks

Here is my project Repositary:-https://github.com/shreyas-1997/Angular-Development

Thank you so much! I hope i will get solution here asap..

created time in 2 months

more