Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'chrome'.



More search options

  • 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


Twitter


CodePen


Company Website


Location


Interests

Found 56 results

  1. I'm using gsap to make a div follow my cursor. Hence I need to center it. To do so I use the following code: gsap.timeline().to(innerCursor, 0.1,{ transform: `translate3d(${clientX}px, ${clientY}px,0) translateY(-50%) translateX(-50%)`, ease: Power1.easeInOut }); This works for Chrome, but not Firefox or Egde - how so? I know translate(-50%, -50%) isn't supported by Firefox, but how can I bypass this?
  2. Hi guys ! This is may not GreenSock related but you still have an idea why it happens. A big amount of users reporting on windows Google Chrome (version 79.0.3945.130 i.e. but many different version) a rendering issue which i tried to "simplify" in the demo above. If you resize the window / scroll on the preview you will see a thin line like shown here on bottom-line.png. This happens only on Windows. If we disable GreenSock animation, it does not show up, however i am still not sure that it has anything to do with GreenSock as i mentioned above. Funny enough this can not be reproduced on Linux and Unix based Chrome Browsers, only on Windows. Anybody a good idea how to avoid this ? (Small Update: Please note that this example simplified, 3D transforms and also more than one content withinthe pngcube wrap can exists, means using force3D false and or setting blur on content inside may help but will not help in real life environment). ps.: And sorry if this is not well addressed in this forum, please free remove it in that case ?
  3. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  4. Hi there, I'm having an issue with GSAP creating lots of detached DOM items in chrome when a parent div is deleted during a tween, despite attempting to stop the tweens. When I do this using just JQuery and not include the GSAP plugin, no detached items remain. To view detached items in chrome I use the following under "Discover detached DOM tree memory leaks with Heap Snapshots": https://developers.google.com/web/tools/chrome-devtools/memory-problems/ Code is below, you'll need jQuery, GSAP, Tween Max and one image. 1) Check for detached items in chrome (you'll see a few that GSAP etc. has by default) 2) Click "Start Tween", the during the 10 second tween click "Stop Tween and Remove Div" 3) Re-check for detached items in chrome. You'll see more have been created. (i.e. not removed by the tween stop). Any help would be greatly appreciated, have switched GSAP for jQuery off in my code for the time being. <!DOCTYPE html> <html> <head> <title>Tween Test</title> <script src="../jquery-3.0.0.min.js"></script> <script src="../greensock-js/src/minified/jquery.gsap.min.js"></script> <script src="../greensock-js/src/minified/TweenMax.min.js"></script> <script> function TweenMe() { jQuery("#innerDiv").animate({ opacity: '0' }, 10000); } function StopTween() { jQuery("#innerDiv").stop(true, false); jQuery("#outerDiv").remove(); } </script> </head> <body> <button onclick="TweenMe();">Start Tween</button> <br /> <br /> <button onclick="StopTween();">Stop Tween and Remove Div</button> <br /> <br /> <div id="outerDiv"> <div id="innerDiv"> <img src="../media/img/red_square.jpg" id="imgMain" style="position:absolute;" /> </div> </div> </body> jquery.gsap.min.js jquery-3.0.0.min.js TweenMax.min.js
  5. Dear GSAP comrades, Why do I get for some HOSTED DrawSVG animations from codepen 1 FPS when using CHROME on Mobile? They work fully FINE ON FF but just not on CHROME! How can this be? Only on Codepen it runs also well on mobile. Can someone solve me the riddle? Thanks for any suggestions, Mat
  6. This page is rendered differently in Firefox as opposed to Chrome. PAGE Which one is correct and how to fix it?
  7. I am animating letterforms of a font with wide and condensed shapes, i.e. interpolating between the letterform’s widest and most condensed states with TweenMax.to(). The SVG-Vectors animate smoothly in Firefox, however in Safari and Chrome the movement looks very shaky. Am I doing it wrong? And more importantly, are there ways to prevent this?
  8. On Chrome and Opera after animating (opening) div (door) lines around that div appears. Tried adding translateZ(0), but then even worse - lines appears after page loads, you don't even need to animate.. On Mozilla and Edge seems fine. Can GSAP fix this issue? I tried adding something like this on hover event: TweenMax.to(".door", 2,{rotationY:13, transformPerspective:300, transformStyle:"preserve-3d",repeat:1, yoyo:true}}); but doesnt work at all.. Thanks, Mantvydas
  9. I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated. If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text. I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?
  10. Hi there. My apologies if this has already been asked (I have exhausted all possible searching avenues). Can animations created with greensock be debugged within Chrome's animation pane? Currently, it 'listens for animations,' but never hears anything.. It's not the end of the world if it doesn't (Greensock seems to be a bit on the awesome side). I'm guessing that Chrome's tool might only be able to manipulate and graph 'pure' CSS animations, rather than interpreting the 3d transforms that Greensock uses to manipulate elements consistently/simultaneously. Thanks, James.
  11. I have been testing a set of Greensock Animation code on a Javascript file and seems to be working quite fine. I am using Chrome 61.03, and a designer who is testing my code seems to have it work initially. However, the very moment that the designer was reloading the code to run it again, all the images which were not transformed initially or animated would disappear immediately upon animation start. I was trying to tell that designer that it could be a cache issue or a browser issue; go update it or something. She refused to budge. I don't know if she is using some outdated version of Chrome browser. Anyway, here is the code that I have; it's difficult to separate into independent working modules to put into some CodePen or something. I split the code into JS, CSS, and HTML. Is it a code issue that causing this to happen on only some browsers?
  12. Currently I do not have a codepen which shows the issue as it happens only in our application and I wasn't able to narrow it down. I have created a video which illustrates the issue. There are 3 elements which animates. Blue bars on the bottom timeline shows their animation delay and duration. Heading layer: It is above the rounded picture. Fades in after 1950ms and plays for 1500ms Author picture: it is the left picture. Starts to fade in at start and plays for 1500ms. Picture with baloons: it has rotationY which turns it from 90° to 0°. What you should see: rotationY should have perspective all the time. This perspective works fine between the two other animation, but when any of them plays, the perspective not applied. I'm trying to create a Codepen to illustrate it on a live example. Maybe it is a Chrome bug, I'm not sure. If you have any suggestion, please share and I will try. Thanks!
  13. Hello happy coders! I found this particle code on another post and updated it make it work for my purpose... see codepen. Every time you mouse-over the black area, 300 particles (divs) are added and animated. While it looks pretty smooth in Safari & Firefox - it's not smooth at all in Chrome. And I know the processor load is pretty high in all browsers. How can I improve the code to make it run more smoothly with less processor load? Maybe using canvas might be a better way to go here - but I have no experience with canvas at all. Maybe there is something else to improve it?
  14. stereoS

    Draggable Chrome

    Hi, First of all, thank you so much for your amazing support, it helped me a lot of times. I have a problem with Draggable / ThrowPropsPlugin, only on Chrome, and I can’t figure why. Sometimes, the slider don’t move when I drag it although the onDragStart event is called. I made a Codepen here : http://codepen.io/adrienlementheour/pen/KaKggM. Can someone take a look ? Thank you
  15. Hi All, I am writing this thread because I want to show my appreciation to folks in this forum, they helped to resolve my problem in a very short time. Few days ago I jumped into a thread, I didn't read the rules, my bad. The original thread I jumped into: Then @Dipscom and @GreenSock (Sorry I don't know why I couldn't mention you here) helped quickly. My problem was resolved by @Greensock helped to update the beta version of Draggable. Now my elements can be dragged in Chrome of Android devices. Thank you very much both of you. I wish you have Good Health and Good Luck. Cheers, Alex
  16. Looks like scaling and will-change issues have been fixed in v59 of Chrome. No more rasterization at a low scale, or jumping at the end of a transform. And using will-change can provide a nice performance boost. Compare the CPU usage between these two demos. In the demo above, you should notice the CPU rise as the image gets larger. This is because it creates a new raster every time the scale changes, so the larger the image, the more the CPU has to work. In the demo below, the CPU usage should be relatively flat as it will use the same raster throughout the animation. While this may improve performance, the overall quality may not look as good, particularly at lower scale levels. EDIT: This is only for graphics. Scaling text is still an issue.
  17. Encountered this issue today while working on a Draggable in Chrome on Windows 10. If I set the type to "x" or "left", my Draggable wouldn't move left and right when I clicked and dragged on it. This only happened in the latest version of Chrome. FF and Edge were fine. (Note that if I set the Draggable type to "x,y" but then used bounds to prevent the element from moving on the Y axis, the Draggable worked just fine.) I found this thread from 2 years ago: Draggable fails in Win 8 touch with type='x' and setting "allowNativeTouchScrolling" to false did fix the issue for me. However, I'm using a desktop, not a touchscreen, so I thought the solution was a bit odd. My question is if allowNativeTouchScrolling is the proper way to fix this issue now and in the future. Also, is it just me or has Chrome been turning into a crap browser lately? It started with their ridiculous decision regarding "will-change" and has gotten worse since then.
  18. Hi, I originally posted this as a reply to another topic, but it has since been marked as "Answered" and it got buried. So, I figure it's best to post a new topic for this issue. Essentially, event.preventDefault() in Draggable's onClick callback no longer works in Chrome 55. The problem only appears on Chrome 55 with touch events (regular mouse clicks are fine). I've created a minimal demo + instructions for reproducing the problem here: http://codepen.io/nyordanov/pen/qRBwEV Our current workaround is to add a 100ms delay between the click and the opening of the submenu, but we'd be grateful if you could offer a permanent solution.
  19. I set the draggable to horizontal move (type: 'x') for a svg slider button. Sometimes while mouse was moving, the button kept staying at the same location. The vertical drag(type: 'y') worked just fine. You could see the test in Codepen link. Does anybody have any ideas about that?
  20. Hi dear devs and coders, Please have a look at provided CodePen sample. I'm having/seeing issue - jerky animation of characters - with SplitText in Chrome every time I use it. Especially that's noticeably with slight transforms and on non-Retina display. Not sure maybe I've missed some Chrome spec or tip for solving that. Please help Cheers Vitaliy
  21. Hi, I created this page several months ago and everything was working great on all major browsers. Now when I check it on chrome and click on "See their time fly", it will start the animation and look good until it starts to render weird and only show part of a photo. Eventually it just kind of breaks. Do you have any idea why this is happening? This page continues to work great on Safari and Firefox. Here is my code: var photoItem = $('.photo_item'), groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), groupFour = $('.group-four .photo_item'), groupFive = $('.group-five .photo_item'), beforeLastPhoto = $('.photo_item.mod-before-last'), pulseEl = $('.photo_item.mod-last'), lastPhoto = $('.photo_item.mod-last'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 100, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, masterTimeline = new TimelineMax(), replayTimeline = new TimelineMax(); Draggable.create(photoItem, {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ start(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function start() { $('.js-btn').addClass('is-not-visible'); $('.js-restart-btn').addClass('is-visible'); masterTimeline.set(photoItem, { clearProps:"zIndex" }) .add(beginGroupOne()) .add(beginGroupTwo(), "-=.7") .add(beginGroupThree(), "-=.5") .add(beginGroupFour(), "-=.3") .add(beginGroupFive(), "-=.05"); } function beginGroupOne() { var tl = new TimelineMax(); groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0); return tl; } function beginGroupTwo() { var tl = new TimelineMax(); groupTwo.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0); return tl; } function beginGroupThree() { var tl = new TimelineMax(); groupThree.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupThree, .5, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .2, 0); return tl; } function beginGroupFour() { var tl = new TimelineMax(); groupFour.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFour, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0); return tl; } function beginGroupFive() { var tl = new TimelineMax(); groupFive.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFive, 1.75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, 1, 0); tl.to(beforeLastPhoto, 1.75, { x: -65, y: 115, xPercent: 0, yPercent: 0, scale:1, rotation: -20, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .to(lastPhoto, 1.75, { x: 0, y: 0, xPercent: -50, yPercent: -50, scale:1, rotation: 10, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .addCallback(finished, "+=1"); return tl; } function moveOff() { var tl = new TimelineMax(); tl.to([groupOne], 1.5, { yPercent: -1000 }, 0) .to(groupTwo, 1.5, { xPercent: -1000, }, 0) .to([groupThree, beforeLastPhoto], 1.5, { yPercent: 1000 }, 0) .to([groupFour, groupFive, lastPhoto], 1.5, { xPercent: 1000 }, 0); return tl; } function finished() { pulseEl.addClass('is-animating'); } function restartTimeline() { masterTimeline.set(photoItem, { clearProps:"zIndex" }) pulseEl.removeClass('is-animating'); replayTimeline.add(moveOff()) .addCallback(restart); } function restart() { masterTimeline.restart(); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
  22. Hey there, I'm trying to use TweenMax to animate an image inside a SVG clipPath. The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine. Anyone can help me? Is a compatibility issue or am I doing something wrong? Thanks guys!
  23. Hi all I'm encountering some jittery animation on chrome while animating the scale of a div using TweenMax (as well as other tween engines). In the codepen, the div with the image is encapsulated inside other divs in order to reproduce the conditions of the project I'm working on. I also put a css animation counterpart that doesn't have that jittery effect. I'm wondering why it is only happening with js tweening engines... I'm only seeing it on chrome (win & mac), it works nice on ff and safari (haven't tried edge yet). Except on ff mac, I get the jittery effect when i'm hovering the div. Do you also have that problem ? Is there a workaround ? I tried the "z" attribute and also put a translate3d on the parent. Thanks. Thomas.
  24. Hello everyone, I've created a tweenmax that alters a clip-path from an external svg file. While it does seem to work, there is a problem with the rendering as you'll see in the attached pic. Once I hover over the div with the cursor then it changes immediately to the correct clip-path. What could be the issue here? EDIT I attached the screenshot
  25. FYI the issue was on Chrome with Windows too, but it happens 100% of the time on OSX Chrome I have a ~30 second long timeline. I trigger a play and pause event depending on where you are on the page. If the animation is in view, it plays, if not, it pauses. I was having an issue where on the footer of my page certain elements would disappear for some unknown reason. So I did around 2 hours of figuring out what it was, and I narrowed it down to some CSS animations I left looping (unrelated to GSAP). That made sense, it was performance draining and so the browser started to glitch. So instead I tied this animation to my timeline and it worked even better than before... but the issue remained. Even when the timeline was paused, if the elements I was animating were stuck in a CSS transform in any way, elements on the page would disappear in Chrome OSX (100% of the time). I fixed it by adding a class that set transform to none when the timeline pauses, and removed it when it played. This was the only way I could fix it. I can't share the URL publicly, but I can post links to both versions via PM if it helps. My main questions in regards to this: Is this a known issue at all? If you animate dozens of things at once (in my case, dozens of 6x6 little squares), is it likely to cause issues, even if the browser isn't using much memory/CPU? It worked fine in every other browser. FF, Safari, IE, even IE9. Thanks
×