search

greensock / GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
https://gsap.com
19.56k stars 1.72k forks source link

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

Closed rezoan closed 3 years ago

rezoan commented 3 years ago

I am trying to animate an SVG image. From below code when its firingtimeline.play(); the animation is working but 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();

Any idea what i am doing wrong here?

Live preview of the page : https://mediaryte.info/dev/adk20/capabilities/

ZachSaucier commented 3 years ago

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

Side notes:

rezoan commented 3 years ago

@ZachSaucier You can find the SVG image at demo page (code is also there and console error can be seen from this page as well) (animation is working here with console error): https://mediaryte.info/dev/adk20/capabilities/ For your reference direct SVG image url : https://mediaryte.info/dev/adk20/wp-content/uploads/2020/10/two-shot1b.svg

Codepen url: https://codepen.io/rezoan-the-typescripter/pen/BazVevW the animation is not showing on codepen UI but code is executing and image is refreshing after 4 second.

ZachSaucier commented 3 years ago

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 commented 3 years ago

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