Jump to content
Search Community

Search the Community

Showing results for tags 'error'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


X


CodePen


Company Website


other


Location


Interests

  1. I have seen many posts about problems installing gsap/business (or club) Tried everything, read all threads, abused ChatGPT, watched the installation but without luck. I have a vite project with GSAP/business installed, locally everything works offcours but when I want to deploy I get the following error: npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fbusiness - Not found This is because it wants npm.greensock.com as registry and not registry.npmjs.org. Should be easy right? I have tried this: removed package-lock.json and clean install removed node_modules folder and clean install added .npmrc to root of folder added .npmrc to use_level on machine setting registry through bash uninstalled every version of GSAP (gsap/react, gsap, gsap/business) and installed only business used the .tgz npm installation file to see if this works (no luck) searched my machine for https://registry.npmjs.org/@gsap%2fbusiness to manually remove it I don't know what to do or try, nothing seems to work.
  2. gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': The provided value is not of type 'ScrollToOptions'. at PropTween._setterFunc [as set] (gsap.min.js:10:43103) at PropTween._renderComplexString [as r] (gsap.min.js:10:43596) at PropTween.render [as r] (gsap.min.js:10:70502) at Tween.render (gsap.min.js:10:38427) at ma (gsap.min.js:10:1833) at _initTween (gsap.min.js:10:34477) at Ma (gsap.min.js:10:4555) at Tween.render (gsap.min.js:10:38041) at Timeline.render (gsap.min.js:10:26036) at Tween.render (gsap.min.js:10:38451) this error appears if I just reload the page when the viewport is in a certain place after that the parallax animation breaks when scrolling becomes fixed
  3. I got an error here: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'totalTime') at Timeline.restart (gsap.min.js:10:20564) at tl.clear (confettiCuisine.js:118:10) at Socket.<anonymous> (confettiCuisine.js:145:16) at Emitter.emit (index.mjs:136:20) at Socket.emitEvent (socket.js:498:20) at Socket.onevent (socket.js:485:18) at Socket.onpacket (socket.js:455:22) at Emitter.emit (index.mjs:136:20) at manager.js:204:18 and this is the code ::: function bel(){ const sound = new Audio('/sound/mixkit-fairy-message-notification-861.wav'); sound.addEventListener('canplaythrough', ()=>{ sound.play(); }) } let tl = gsap.timeline( {paused: true, repeat:2}); tl.play = function(){ tl .to(leftBell, { duration: 0.15, css: { scale: 1.2, skewY: "1deg", skewX: "-1deg" }, ease: Power0.easeNone }) .to(rightBell, { duration: 0.15, css: { scale: 1.2, skewY: "1deg", skewX: "-1deg" }, ease: Power0.easeNone }) .to(bodyBell, { x: 0, transformOrigin: "50% 50%" }) .to(bodyBell, { keyframes: [ { x: -3, rotate: 10}, { x: 1.5, rotate: -10}, { x: -1.5, rotate: 6.0 }, { x: 1.5, rotate: -4.4}, { x: -1.5, rotate: 2.2 } ], duration:0.4, ease: Power0.easeNone }); } tl.clear = function (){ this.kill(); this.restart(); } // const submit = () => { function submit() { form.addEventListener('submit', (e) => { e.preventDefault(); socket.emit('message', { content: chatInput.value, userName: Username.value, id: Id.value }); chatInput.value = ""; return false; }); // what i get from the server socket.on('message', (msg) => { if(window.location.pathname !=="/chat"){ displayMessage(msg); bel(); tl.play(); }else{ displayMessage(msg); tl.clear(); } chat.scrollTop = chat.scrollHeight; }) socket.on('load all messages', (data) => { data.forEach(message => { displayMessage(message); }) chat.scrollTop = chat.scrollHeight; }) }
  4. Hi, Receiving this "Module not found" error while importing DrawSVGPlugin module. the base gsap is working fine, just the drawSVGPlugin is throwing this error. import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; export const PathAnimation = () => { gsap.registerPlugin(DrawSVGPlugin); } I am using NextJS 14.1.0. I tried importing the plugin from "/dist" "/all", but the issue persists. Thanks in advance for help.
  5. Hi folks, A few months ago, I joined a company where I, along with another developer, took on the responsibility of maintaining their website, which heavily relies on GSAP for animations. However, that other developer has since left the team, and I've been encountering an issue when attempting to build the website using Netlify. The error message I'm getting reads as follows: npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fbusiness - bad authorization header. Please login again npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. It seems like the build is failing due to authorization problems related to GSAP. I suspect this might be linked to the other developer using credentials that are no longer valid since his accounts were deactivated. Regardless of this being the case, could someone please advise me on what steps I should take to resolve this issue and ensure that everything runs smoothly again? I should mention that I'm not a highly experienced developer, so your assistance (and patience!) would be greatly appreciated.
  6. Hi Everyone! Pls help me I have a trouble with the integration of GSAP and Locomotive Scroll When i tried to make an animation on both scripts the animation of Motion Path is going a little slow and looks like frame and frame animation, and i dont know how to solve it ! any idea? Thanks to everyone
  7. Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js
  8. Hi, I'm a member of the GreenSock club and successfully downloaded and installed GSAP 3.0 and bonus plugins using the gsap-bonus.tgz method with YARN. I'm now trying to import the DrawSVGPLugin but it's throwing errors in my Terminal and then also in my browser. This is the setup in my main app index.js: import 'dom4' import 'svgxuse' import domready from 'domready' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin.js' import Swup from 'swup' import SwupBodyClassPlugin from '@swup/body-class-plugin' import SwupJsPlugin from '@swup/js-plugin' import GlobalHeader from '../global-header' import ProjectGallery from '../our-work/project-gallery' import Contact from '../contact' import GlobalFooter from '../global-footer' import ScrollBtn from '../scroll-btn' import InView from '../in-view' gsap.registerPlugin(DrawSVGPlugin) This is the error that is showing in my Terminal: ERROR in bundle.js from UglifyJs SyntaxError: Unexpected token: keyword (var) [./~/gsap/DrawSVGPlugin.js:208,0] And this is the console error in my browser (Chrome): Uncaught SyntaxError: Unexpected token 'export' I can see the plugin inside the node_modules/gsap folder. I'm also running [email protected] Any help would be greatly appreciated. Thanks, Dayne
  9. I tried to make this slide in Rickett to learn: https://codepen.io/creativeocean/pen/OJgNyVm I get a TypeError error: _toArray is not a function. My code: https://codesandbox.io/s/optimistic-grass-w3wwt1?file=/src/App.js
  10. Hi, I've been having an issue with this error ("Uncaught TypeError: t[0] is undefined"), whenever I try to use motionPath and give it a value of an object with multiple values in it, it gives me that error, and I've been trying to solve it for so long with no use. I tried gsap.registerPlugin, I tried importing instead of CDN, I tried different syntax, all with no use. Please help, I've been at this for so long. Should also mention that the error keeps getting spammed, goes up to 90 times sometimes, but it's repeats anyways. Here's the code: Javascript: CSS: HTML: Here's the error itself:
  11. I put the following CDN code in my HTML file and then executed TimelineLite function in javascript. <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script> <My javascript code> start = ()=> { let loader = document.getElementById('loading'), loadContents = document.getElementsByClassName('loading_content'), tlLoader = new TimelineMax(); // Loader Timeline tlLoader .staggerFromTo(loadContents, 0.3, {y:0, autoAlpha: 0}, {y:20, autoAlpha: 1, ease:Back.easeInOut}, 0.05 ) .fromTo(loader,0.3, {autoAlpha: 1, scale: 1.3}, {autoAlpha: 0, scale: 1, ease:Power0.easeNone}, 0.9 ); } start(); Then... the following error appeared in Console. Why is this happening? I guess I add the CDN code incorrectly, so I change to another CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> and tried to use changed TimelineMax to TimelineLite in my javascript code. but this problem is still happening now. plz.. help me
  12. Has anyone encountered the issue, today I was work on a new project and I was using new updated GSAP and MorphSVGPlugin for this one. I had to do some motion along a path. So first this I wan creating variables like below: var motionPath_1 = MorphSVGPlugin.pathDataToBezier("#motionPath-1", {align:"#connecting-dot"}); But this is throwing an error as below: Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function This is the same thing I've been using and on the new update this has no change as I can think of. When using old GSAP and MorphSVGPlugin it is work fine. Has anyone encountered this? Does anyone know what is the issue?
  13. FatMunkey

    "Import" issue

    So I have a test file trying out an idea. Want to use the Draggable scroller In the screenshot below you will see that Draggable is undefined. The file paths are all correct - I have checked my script tags thoroughly. The problem seems to be due to the other two errors. See below This seems to be an issue with "import" as opposed to the " { " As an aside, That last error on the list shows up in any web page i open in Chrome. It has something to do with promises but it does not appear to be specific to ANY web page (Google mail, CNN, etc all show that same error) and may be a problem with my browser. At any rate, i do not think it has anything to do with the problem I'm having with GSAP. Does anyone have any ideas?
  14. Hi all, Not sure if i'm missing something or if I'm doing something incorrect. But I'm trying to run simple unit tests with Jest and Enzyme on my component that uses gsap for a search input box. The component works perfectly fine, animation is great too. But whenever i run my tests, and specifically this line component.find('#close').'click' i get ERROR CANNOT TWEEN A NULL TARGET the close button calls this function below: animation.hideSearch(this.searchInput) animation.hideSearch is: hideSearch(target){ return TweenMax .to(target, duration, { opacity: 0, display: 'none' }) }, And finally here is my search input: <input id='search-input' className={styles.input} value={this.state.searchValue} onChange={this.handleSearch} ref={div => this.searchInput = div}/> Is there anything i need to configure in order to get jest to ignore the gsap animation? Any help is appreciated. thanks!
  15. This page is rendered differently in Firefox as opposed to Chrome. PAGE Which one is correct and how to fix it?
  16. Hey so I'm currently making an animated graph to show how often I skip a song on Spotify. All I'm trying to do right now is bring in "Spotify" however no animation plays despite chrome dev tools saying there is no error. Also, I commented out line 209 in my HTML because for some reason it cannot link my DrawSVGPlugin. If anyone can help with one or both of the problems I'd greatly appreciate it; thanks.
  17. Hi guys been trying to make an animation for work where there is an image that goes from left to right with a clipping path to make the image have some sort of cut on the top. My problem is that it doesn't work on safari but somehow works on every other browser even firefox. I linked all the assets needed in the same folder to make the animation. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{clip-path: url(#clip1); position: absolute; top: 0; left: 0;} #svg-defs {position: absolute; width: 0px;height: 0px;} </style> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <body> <svg id="svg-defs"> <defs> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </defs> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" src="bg_01.jpg" width="160" height="600"/> </div> </div> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> var start = 0.1; var trans = 0.3; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); tl1.from('#mask1', trans, { x: -170,y: -35,ease: Power1.Out}) tl.to([tl1], start, "sequence", "-=0.45") </script> </body> </html> That was the original code. I made the animation slower and tried all i can to fix it on this code but some reason the only way it seemed to work is if i constantly resized the browser. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{ /* clip-path: url(#clip1); */ -webkit-clip-path: url(#clip1); position: absolute; top: 0; left: 0; } body{ width: 200px; height: 800px; } #myAd{ width: 200px; height: 800px; } .svg-defs {position: absolute; width: 0px;height: 0px;} </style> <!-- <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> --> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> function resize(){ console.log("tick"); window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 requestAnimationFrame(function(){ console.log("requested") }) } function main(){ // TweenLite.ticker.useRAF(false); // TweenMax.lagSmoothing(1000, 16); var ad = document.getElementById('myAd'); var mask1 = document.getElementById('mask1'); var img = document.getElementById('img1'); function update(){ console.log(img) // console.log("tick"); // window.dispatchEvent(new Event('resize')) } setInterval(update, 1000); // TweenMax.ticker.addEventListener("tick", update); var start = 0.1; var trans = 5; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); var mask1 = document.getElementById("mask1"); var clip1 = document.getElementById("clip1"); var ad = document.getElementById("myAd") tl1.from(ad, 10, { x: 0,y: 0 }) tl.from(mask1, trans, { x: -170,y: -35,ease: Power1.Out}) // tl1.from(mask1, trans, { // x: -170,y: -35,ease: Power1.Out}) // tl.to([tl1], // start, // "sequence", // "-=0.45") // TweenMax.ticker.removeEventListener("tick", update); } </script> </head> <body onLoad="main();" onResize="resize();"> <svg class="svg-defs"> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" class="" src="bg_01.jpg" width="160" height="600"/> </div> </body> </html> TweenMax.min.js mine_testing for browsers.html
  18. Hello GSAP, I've got my SVG animation working in CodePen, here's a rough start: http://codepen.io/atkinson/pen/bVqqBm/ but when I place in a WordPress site I'm getting this error in the console: "Uncaught TypeError: Cannot read property 'length' of undefined". I'm loading TweenMax via enqueue scripts in my functions file, so all is good there. The SVG code is placed inline via visual composer/raw HTML. Is this somehow related to doc ready? The js file begins with: jQuery(document).ready(function ($) { I'm at a loss as to how to fix this... Forgive me as I'm a GSAP newbie! Any ideas? Thanks for your help!
  19. Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. Hey guys, sooo first time i am getting this. Cannot understand why. My other documents work but with this i am suddenly getting this weird error. Must be something i am overlooking. Btw everything is in one file because i am making something for google adwords Help would be very much appreciated. Side question: item 1 from x-250 to 0 (center) fade out(opacity 0 ) item 2 from x-250 to 0 (center) fade out(opacity 0 ) item 3 from x-250 to 0 (center) fade out(opacity 0 ) Could this be achieved with stagger? and how? thankss!
  20. hey , Hi Hello ... I have read your answer to this topic : that's awesome and a smart guy developed it a little bit (tnx to a user asked about the same problem) ... add saving what swf lastly loaded (using shared object) and fade in loading swf etc ... Now it's all great but I faced a big problem in my output : Error 2006 The Supplied Index is Out of Bounds How can I get ride of this ... any help is appreciated... stackoverflow is a mess to solve this ... tnx for your help carl the code : import flash.events.FullScreenEvent; import flash.display.StageScaleMode; stage.scaleMode = StageScaleMode.EXACT_FIT; stage.displayState = StageDisplayState.FULL_SCREEN; import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.net.SharedObject; import flash.events.MouseEvent; var mySO:SharedObject = SharedObject.getLocal("saver"); var loaderIndex:Number = -1; loaderIndex = mySO.data.my_vis; if (!mySO.data.my_vis) { loaderIndex = -1; } if (mySO.data.my_vis == 1) { loaderIndex = 0; } if (mySO.data.my_vis == 2) { loaderIndex = 1; } if (mySO.data.my_vis == 3) { loaderIndex = 2; } if (mySO.data.my_vis == 4) { loaderIndex = 3; } progress_mc.scaleX = 0; var currentLoader:SWFLoader; var swfs:LoaderMax = new LoaderMax({onComplete:completeHandler,onProgress:progressHandler,onChildComplete:childCompleteHandler}); swfs.append(new SWFLoader("part1.swf", {container:this.stage, autoPlay:false})); swfs.append(new SWFLoader("part2.swf", {container:this.stage, autoPlay:false})); swfs.append(new SWFLoader("part3.swf", {container:this.stage, autoPlay:false})); swfs.append(new SWFLoader("part4.swf", {container:this.stage, autoPlay:false})); function progressHandler(e:LoaderEvent):void { progress_mc.scaleX = e.target.progress; } function childCompleteHandler(e:LoaderEvent):void { trace(e.target + " loaded"); e.target.content.visible = false; } function completeHandler(e:LoaderEvent):void { trace("all swfs loaded"); progress_mc.visible = false; initCurrentLoader(); addEventListener(Event.ENTER_FRAME, trackSWFPlayback); } function initCurrentLoader() { loaderIndex++; trace(loaderIndex); mySO.data.my_vis = loaderIndex; mySO.flush (); if (loaderIndex == swfs.numChildren) { //reset back to 0 if the last swf has already played //loaderIndex = 0; //can't show stuff that was unloaded so lets stop mySO.clear(); loaderIndex = -1 swfs.load(); trace("all done everyone gone"); removeEventListener(Event.ENTER_FRAME, trackSWFPlayback); } else { //dynamically reference current loader based on value of loaderIndex currentLoader = swfs.getChildAt(loaderIndex); trace(currentLoader); trace(loaderIndex); //make the content of the current loader visible currentLoader.content.visible = true; //fade it in TweenLite.from(currentLoader.content, 0.1, {alpha:1}); //tell the current loader's swf to to play currentLoader.rawContent.gotoAndPlay(1); } } function trackSWFPlayback(e:Event):void { //trace(currentLoader.rawContent.currentFrame); //detect if the loaded swf is on the last frame if (currentLoader.rawContent.currentFrame == currentLoader.rawContent.totalFrames) { trace("swf done"); //hide and stop current swf currentLoader.content.visible = false; currentLoader.rawContent.stop(); //unload the swf that just played currentLoader.unload(); //set up and play the next swf initCurrentLoader(); } } this.addEventListener(Event.ENTER_FRAME, loadSWFs) function loadSWFs(e:Event):void{ load_btn.visible = false; swfs.load(); this.removeEventListener(Event.ENTER_FRAME, loadSWFs) } /* Click to Hide an Object Clicking on the specified symbol instance hides it. Instructions: 1. Use this code for objects that are currently visible. */
  21. I have a website in which I'm trying to load the TweenMax tag; https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js Everytime I try to do it, I get this: TweenMax.min.js:16 Uncaught TypeError: Cannot read property 'greensock' of undefined at Function.<anonymous> (TweenMax.min.js:16) at check (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at new c (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at t._gsDefine (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at TweenMax.min.js:16 at TweenMax.min.js:16 But, when I load the TweenLite tag (https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js) before hand, the TweenMax tag loads just fine. The website I'm trying to add this to is: http://www.pergunteaumamulher.com/ (it's in Brazilian portuguese). You can try to add the tag in the console to see the behavior I'm pointing out. Have you ever seen something like this? I believe it might be the same problem we have seen in here: Has it ever being addressed?
  22. Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '
  23. This looks so simple but I just can't figure out what the problem is. I'm creating a bezierPlugin demo and use an array of point objects both to define the bezier path and to distribute visual guides. TweenMax throws an error `invalid css tween value: [object Object]` like the objects aren't valid, but everything looks fine to me. The loop and pen works fine with any hardcoded object such as `{ x: 100, y: 100 }`. Why is the referenced object invalid in the `TweenMax.set()`? // Create dots and distribute them along the bezier path for (var i=0; i<6; i++) { var blueDot = new Dot(container); blueDot.target.className = "blue-dot"; //TweenMax.set(blueDot.target, pointObjects[i]); console.log(pointObjects[i]); // Looks like a valid object to me } Un-comment line 38 and see it break. Many thanks!
  24. Hi guys, I am using the splitText plugin in a Rich Media expandable unit: I loaded the plugin after TweenMax in this order right before the bottom closing body tag for a rich media Doubleclick creative: <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> <script src="SplitText.min.js"></script> <script src="logic.js"></script> In the head I loaded the enabler necessary for the Doubleclick Rich media API to work as intended as usual... The ad works fine, the split text works as intended, it splits the lines and wraps the lines in classes. In the collapsed state it will run an animation that has the split text call in the ad's show() function: function show() { var mySplitTxt = new SplitText('#txt1C', {type:'lines', linesClass:'line++'}); var tlCollapsed = new TimelineMax(); tlCollapsed .set(mySplitTxt, {opacity:0.9}) //more stuff .staggerFrom(mySplitTxt.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=0.5') //more stuff } When previewing in the browser, no error appears. Only after I expand the ad I can see: Console Error: tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js:15 Uncaught TypeError: a.split is not a function This happens on expand: When the expand button is clicked, the unit expands and runs the tlExpand timeline. expandButton.addEventListener('click', onExpandHandler, false); var splitTxt1E = new SplitText('#txt1E', {type:'lines', linesClass:'line++'}); var splitLegal = new SplitText('#legal', {type:'lines', linesClass:'line++'}); var tlExpand = new TimelineMax({paused:true, overwrite:'all', onComplete:cardSheen}); tlExpand .set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block', visibility:'visible'}) .set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}) //more stuff .staggerFrom(splitTxt1E.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=1.3') function onExpandHandler(){ Enabler.requestExpand(); Enabler.startTimer('Panel Expansion'); } function expandStartHandler() { TweenMax.set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block'}); TweenMax.set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}); // add expanding animation here tlExpand.restart(); Enabler.finishExpand(); } I will try to stripped down codepen but in the meanwhile, any clues as to what could be happening that causes the error when the unit is expanded? Again, the animation works as intended. Thanks!
  25. I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!
×
×
  • Create New...