Jump to content

Search the Community

Showing results for tags 'problem'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 21 results

  1. I'm using scrollTrigger to animate some videos (.mp4) on scroll. Everything seemed to work fine, except that it doesn't seem to work on iOS (I tested on iPhone 11 iOS 16.0 and on iPhone 13 iOS 16.2). In fact, it is as if it didn't load the videos, the space remains empty and obviously the GSAP scrollTrigger animation doesn't start. Did I miss something?
  2. So, we had a web dev build our new homepage. He used NodeJS and had us 'run npm build' to build it on our end. We managed to get the main page loading fine on our wordpress based site. It required us to wpenqueue the npm generated bundle.js file. However we wanted to use the footer he put together on the rest of the site. The issue we're running into is the footer element that needs to animate does not work. It only works on the homepage which has a ton of elements to it. Hopefully somebody here can give me some clues about how to get this to work. I do understand that import gsap from 'gsap'; won't work on codepen the way I have it written, but I wanted to keep it as close to the original as possible. There's also an export function initLogo() line (the file this javascript is pulled from is called Logo.js). There is a general script.js file which includes the following, but I'm not sure if it's relevant here or not //general css style import './style.css'; //component css styles import './header.css'; import './oscilloscope.css'; import './hud.css'; import './ticker.css'; import './tv.css'; import './team.css'; import './footer.css'; import './logo.css'; import { MousePosition } from './shared/MousePosition'; import { initOscilloscope } from './oscilloscope/Main'; import { initHud } from './hud/Hud'; import { initTicker } from './ticker/Ticker'; import { initTv } from './tv/Main'; import { initTeam } from './team/Team'; import { initLogo } from './logo/Logo'; //track mouse position const mousePosition = new MousePosition(false); mousePosition.init(); //oscilloscope initOscilloscope(mousePosition); //hud initHud(mousePosition); //ticker initTicker(); //tv initTv(mousePosition); //team initTeam(mousePosition); //logo initLogo(); Any insight would be much appreciated.
  3. Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
  4. Hello, I'm new to GSAP. I was trying scrolltrigger in a NextJS project but I noticed that gsap.utils.selector(someRef) ... useEffect(() => { gsap.to(someRef('.s1'), { duration: 1, x: 800, scrollTrigger: someRef('.s2'), }); }); ... not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help. gsap.utils.selector(someRef) ... useEffect(() => { gsap.to('.s1', { duration: 1, x: 800, scrollTrigger: '.s2', }); }); ... Here is the original code that I was working on import gsap from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import React, { useEffect, useRef } from 'react'; gsap.registerPlugin(ScrollTrigger); export default function Home() { const containerRef = useRef(); const container = gsap.utils.selector(containerRef); const test = useRef(); useEffect(() => { gsap.to(container('.s1'), { duration: 1, x: 800, scrollTrigger: container('.s2'), }); }); return ( <> <div ref={containerRef} className='container-wrapper'> <div className='hero section'></div> <div className='about section'> <div className='s1'></div> <div className='s2'></div> </div> <div className='skills section'></div> </div> <style jsx>{` .section { height: 100vh; width: 100%; } .hero { background-color: red; } .about { background-color: green; } .skills { background-color: blue; } .s1 { width: 200px; height: 200px; background-color: white; } .s2 { margin-top: 400px; width: 200px; height: 200px; background-color: black; } `}</style> </> ); }
  5. http://clients.super-agency.com/test/index.html Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? Menu code const ham = document.querySelector(".ham"); const menu = document.querySelector('.main-menu'); const links = menu.querySelectorAll('li a'); const menulist = document.querySelectorAll('.menu-list'); var tl = gsap.timeline({ paused: true }); tl.to(menu, { duration: 1, opacity: 1, height: '100vh', ease: 'expo.inOut', width: "100%", }) tl.from(menulist, { duration: .5, opacity: 0, height: '100vh', left: '0', ease: 'expo.inOut', }, "-=0.5"); tl.from(links, { opacity: 0, duration: 1.2, ease: "power4.out", y: 320, stagger: 0.1, }, "-=0.1"); tl.reverse(); ham.addEventListener('click', () => { menuBar.reversed(!menuBar.reversed()); tl.reversed(!tl.reversed()); }); var menuBar = gsap.timeline(); menuBar.to('.bar-1', 0.5, { attr: { d: "M8,2 L2,8" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.to('.bar-2', 0.5, { autoAlpha: 0 }, 'start') menuBar.to('.bar-3', 0.5, { attr: { d: "M8,8 L2,2" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.reverse(); Menu Codepen Code https://codepen.io/r3khchand/pen/MWbJOwz
  6. Hello everybody, I am totally new to GreenSock banners, but I have a task, which is suppossed to be not so hard, but seems to be very hard for me and I would be glad for some help. I have to make 728x90 test size by modifying the necessary javascript modules and css using GSAP. Everything I have is in https://codepen.io/mikiko16/pen/RqBvPo file.
  7. I just started with tweenmax today. went to the tutorial here...https://greensock.com/get-started-js Followed everything. included the cdn. got myself an image...... got myself the reference to my javascript file. copied exactly word for word and i couldnt get the animation to work. honestly didnt want to ask i've already spent 5 hours trying to figure it out with no avail. Everything is in the same folder.... I've even tried to switch the class to id and use document.getelemntbyid to reference it as well but doesnt work. can anyone tell me how to fix it? i dont really want to give up on this..... Also im using google chrome if that helps Heres the tutorial code <body> <div class="*%$#"> <img class="logo" src="download.jpg"> </div> <!--CDN link for TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="test.js"> </script> </body> and my javascript file TweenMax.to(".logo",2,{left:600});
  8. Hey folks. I got a rather simple problem. Please check out the code pen. Run it and then comment out the JS and comment in the CSS. What do I do wrong? Thanks.
  9. Stumped on this. I would like to use the attr plugin to do a simple animation for my banners, basically just have an image animate in from the side or top. This page makes it seem like I could use the attr plugin to animate the x, y coordinates of an element. I can get the heigh and width animation working as long as I use a table, but can't figure out how to get the x and y working. https://greensock.com/AttrPlugin My html and scripts are attached. Archive.zip
  10. Hey there, I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it. In the provided codepen, please check the JS imports. It's only TweenLite. Why doesn't it work like this? I tried importing TimelineMax only, too, then added a var tl = new TimelineMax(); Nope... How can I make good use of the smaller libs? Thanks guys, Laser
  11. I just started using these libraries today but I hit a bit of a roadblock. I am aware that my pen is awkwardly mixing css transforms and greensock tweens however even when all css transforms are commented this problem persists. The content on the back of the card flickers when rotating to match its fanning angle during the animation. The center one, which has no rotation, does not flicker at all. However the others do. Also strange is that the front of the card does not experience this at all. Additionally I noticed that onRelease does not seem to move the object back to the original location until after a mouse move event has occured. this means my mouseout animations will not trigger if you drag the card and then do not move the mouse. Any ideas on work arounds to these problems? The red line is just the area where the drag event should be forced to end and the blue line is the hand area. I sorry for the messy scss, I was trying to move over to greensock however now that this is broken Im not sure what to do. http://codepen.io/AdilSoubki/pen/dPwPRP
  12. Hi all .. this is not really something I can make a codepen example of .. But I could really do with a wee bit of help diagnosing whats up please !! The website was created in Adobe Edge Antimate and powered by Greensock .. It was my first attempt at a site away from Flash and had been working happily across platforms ( mobile and desktop ) for over a year and a half .. Now the site no longer works on iOS Chrome and possibly some other platforms that I don’t have access to. I really don’t know how to start diagnosing this .. here is what I’m seeing: - iOS Chrome - Loads the edge animate preloader - Preloader finishes - Site hangs on green screen which is where Greensock should kick in It appears to me that the edge side of things is ok .. but chrome isn’t liking Greensock for some reason .. I may be wrong ?! I have tested on: - mac versions of - Safari - Chrome - Firefox - Opera - iPhone - safari - ALL GOOD - iphone Chrome - ALL BAD I’ve put the site up on my server .. here’s a link: http://www.monkeygonetoheaven.co.uk/for_greensock/IOS-CHROME-PROBLEM/ Would really appreciate if someone could point me in the right direction on how to diagnose what up. Cheers Rory
  13. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
  14. I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
  15. I made a transition animation in a few boxes in my site and it's making my texts remain in effect blur and blur. Can anyone help me? This is the site: www.krawczuk.com.br / koletivo-creative. Thank you!
  16. Hello, I created a FLA file few years ago using your v11 release. Last week I downloaded your v12 release and started new projects. But I got a problem when I reopened and reexported my old FLA file (built with v11). Some stuff are broken during the animation, maybe because of the "overwrite:" parameter set to "true" or "false" but I'm not sure... So I need : - to use the v11 release for my old project (because I can't fix all bugs in it). - to use the v12 release for my new project. In all my FLA files (old and new), I import your greensock classes from a unique folder "AS3-classes". So I never put the "com/greensock/" folder to the root of my swf. My question is : How can I import the v11 for my old project and the v12 for my new project ? Is it possible for those folders to cohabitate ? Thanks a lot for your help.
  17. The ThrowProps Rotation demo code produces some erratic behaviour although it only happens when the dial is within a movie clip ie. nested movie clips. Symptoms are that the dial; 1. lags behind the mouse pointer and 2. rotates in the correct direction, but only from 90 to 270 degrees, it then rotates in the opposite direction. Is there any way to tweak the code to correct these problems?
  18. Hello i have made an animation using TweenMax on this site: http://temp.agenciacaput.com/Caput And the menu its animated with the "animation.ui.js" file. The menu works 100% BUT when you make us of it more than 20 times or a little less than that... The menu got bugous... Really bugous...so i need to know if it is a tweenmax bug or i am doing something really stupid... Tnx for your time.
  19. Hi folks, I am not really new to this, but I get a hard time trying to do the following: I got an array of MCs named "stepArray". I want to animate through it after a dice function which gives me a number between 1 and 6 (if 5, the stepArray will have 5 elements and so on). Whatever, I need to know when the last element of the array has finished tweening, because that is the time the dice can be used again and is set free. If you need more input, please reply. function animatePlayerMove ():void { tweenScaleUp(); } function tweenScaleUp():void { TweenMax.allTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown}, stepStaggerAmount); } function tweenScaleDown():void { tma = TweenMax.allTo(stepArray, 0.2, {alpha:1, scaleX:1, scaleY:1, dropShadowFilter:{blurX:5, blurY:5, distance:5, alpha:0.33}, ease:Cubic.easeInOut}, stepStaggerAmount); addEventListener(Event.ENTER_FRAME, checkStepAnimationprogress); } function checkStepAnimationprogress (e:Event):void { if(tma[tma.length-1].currentProgress == 1){ //This doesnt work properly even with totalProgress trace("STEP ANIMATION ENDS HERE"); removeEventListener(Event.ENTER_FRAME, checkStepAnimationprogress); activateDice(); } } Obviously there is some mistake in my logics and I hope someone here will help. TIA, Lasercode
  20. Hi Guys, I seem to have a problem with the tweenMax.updateTo method. Given this sample code: _tween = new TweenMax(myMc,2,{rotation:360,repeat:-1,onUpdate:onUpd, ease:Linear.easeNone}); function onUpd():void{ if(_stop){ _tween.updateTo({repeat:1,rotation:_angleToStop, onComplete:onF},true); } } I am expecting the _tween to update 1. its rotation value to the predetermined value in _angleToStop 2, repeat count to change from infinity (-1) to 1 3. for it to call the onComplete method once that 1 rotation is done, where it stops in the correct value; What actually happens is the spinning starts to slow down as i would expect as it is reaching the target value however it then start animating again... Its like the repeat is not working.. Could anyone help me? Seems weird. Thanks, Bynho
  21. So, I seem to have a small problem. I have a bunch of buttons on my stage, and when I click them, they load different images as dictated by an XML document. To allow me to use one button instance repeatedly with different click actions, I create the button array and the clickHandler. This is all by way of explaining why all the image load stuff is in a separate function called loadTheImage(name). But the problem is that everything seems to work fine, I get to this screen, click one of the buttons, and whichever one I click, the proper image loads (I see my little "ok, that image was loaded..." message traced out... and then everything seems to freeze or lock up. As soon as the image has loaded, none of the other buttons will respond (even to rollover), and the only thing I can do is to close out the swf and scratch my head. var buttonArray:Array = [pic1.daButton,pic2.daButton,pic3.daButton,vid1.daButton];//instance names var urlArray:Array = [myXML.hfloor[0].d_location[0].d_image[0],myXML.hfloor[0].d_location[0].d_image[1],myXML.hfloor[0].d_location[0].d_image[2],myXML.hfloor[0].d_location[0].d_video[0]]; for (var i:int = 0; i < buttonArray.length; i++) { buttonArray[i].addEventListener(MouseEvent.CLICK, clickHandler); } function clickHandler(event:MouseEvent):void { var clickedIndex:int = buttonArray.indexOf(event.currentTarget); trace("ClickedIndex = "+clickedIndex+" and you clicked on button " + event.currentTarget.name); loadTheImage(urlArray[clickedIndex]); } function loadTheImage(imgName) { var xPoint = stage.stageWidth / 2; var yPoint = stage.stageHeight / 2; trace("Ok, I'm going to load image: "+ imgName); var theloader:ImageLoader = new ImageLoader(imgName,{container:this,x:xPoint,y:yPoint,width:1280,height:720,scaleMode:"proportionalInside",smoothing:true,centerRegistration:true,onComplete:onImageLoad}); //begin loading theloader.load(); //when the image loads, fade it in from alpha:0 using TweenLite; function onImageLoad(event:LoaderEvent):void { TweenLite.from(event.target.content, .5, {alpha:0}); trace("ok, that image was loaded and faded in!"); } } Can anyone give me any insight into why this might be happening? I am utterly perplexed... thank you!