Jump to content

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

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Jonathan

  1. Hi @selfishound and Welcome to the GreenSock Forum! Sorry your having issues! To add to all the helpful advice given above When i look at your SVG markup in the HTML panel, it looks malformed, its missing the ending </svg> tag. You will notice after the </filter> ending tag there is no ending <svg> tag. Some browsers can render your code wrong when it is malformed, and cause some havoc when rendered. You should run your SVG code in an online svg optimizer to make sure its optimized and clean from uneeded whitespace. Online SVG Optimizer and Cleanup tool: https://jakearchibald.github.io/svgomg/ Also you might want to place your <filter> tag inside an SVG <defs> tag. SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> <filter id="logo-f"> <feGaussianBlur id="logo-blur" in="SourceGraphic" stdDeviation="0"/> </filter> </defs> Here are some examples of animating SVG filter blur using GSAP: And this other one animating SVG filter blur: And then there is also animating CSS filter blur property examples: And this other using GSAP to animate CSS filter blur property with the GSAP SplitTextPlugin . Just my 2 cents, hope this helps
  2. Hi @RolandSoos Sorry your having this issue! Have you tried to run your codepen in debug mode instead of in edit or full mode. The reason being is because edit and full mode run in an iframe. Whereas debug mode runs without an iframe. I frames can cause issues with browser console and the javascript parser. In your codepen URL change /pen/ to /debug/ and check the console and see if you see it fire twice. Like this /pen/ to /debug/ : https://codepen.io/anon/debug/ZmVoXQ See if that helps, this way we can rule out if codepen is causing an issue with GSDevTools? Thanks and Happy Tweening
  3. Hello @mandooraj and Welcome to the GreenSock Forum! Thank you for sharing your GSAP project. The demos look great Happy Tweening
  4. Hello @tri.truong and Welcome to the GreenSock Forum! I couldn't load your website link in Firefox on Windows 10. But GSAP does have a auto scroll plugin called ScrollToPlugin. https://greensock.com/docs/Plugins/ScrollToPlugin It allows you to do the following To scroll the window to a particular position To scroll to the element with the ID "#someID" To tween the content of a div To scroll when define an x (translateX) or y (translateY) value or both Some codepens of this: And this: There is also the GSAP tweenTo() method tweenTo() : https://greensock.com/docs/TimelineMax/tweenTo() .tweenTo( position:*, vars:Object ) Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. If your still having issues please create a reduced codepen demo example so we can test your code live. Happy Tweening!
  5. Hi again @Zokdok isActive() can work on a single tween, or a timeline. You can see in that codepen example that its using the tween variable that is referencing a single tween to check if its active (running) var tween = TweenLite.to(box, 2, {x:endX, ease:Linear.easeNone}); if(!tween.isActive()){ //only reverse the direction if the tween is not active // do something with tween } that could have happened when the site was migrated to a new forum system, sorry about the inconvenience for missing forum history. Happy Tweening!
  6. Hello @Zokdok and Welcome to the GreenSock Forum! There are number of ways to detect if an animation, tweens, or timeline is running using the GSAP isActive() method. Found here in the GSAP Docs: .isActive( ) : https://greensock.com/docs/TimelineMax/isActive() .isActive( ) : Boolean Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines). So for example, if a tween is in the middle of tweening, it's active, but after it is finished (or before it begins), it is not active. If it is paused or if it is placed inside of a timeline that's paused (or if any of its ancestor timelines are paused), isActive() will return false. If the playhead is directly on top of the animation's start time (even if it hasn't rendered quite yet), that counts as "active". You may also check the TweenMax.progress() or TweenMax.totalProgress(), but those don't take into consideration the paused state or the position of the parent timeline's playhead. Example of usage: Hopefully that helps.. Happy Tweening!
  7. Hello @Mike_king I understand you need help but we need to keep the posts clear of clutter from other topics. I see you already posted your new topic, that is good. But please try not to post messages for help from another topic inside another topic. This will clutter up this topic and make it hard for other community members looking for answers and seeing off topic questions. Thanks
  8. Hi again @FilGapper Niraj After looking at it you would be better off using my second example like PointC posted above. This is because my first example animates the width of a paragraph to show each letter on each SteppedEase. So its basically showing a little bit of the <p> tag when each letter is revealed. That is a problem for multi-line sentence in one paragraph since width is being animated. Usually you can just add to your CSS white-space-normal so it wraps, but you would see both lines animate at the same time instead of one line at a time. So you would have to use maybe 2-3 <p> tags for each line of the sentence. And then trigger each paragraph line after the previous one is complete along with killing the blinking on that line that is complete. With each line having their own tweens or timeline. Whereas my second example is splitting that paragraph tag into <div> tags for each letter using GSAP SplitTextPlugin. Then animating the autoAlpha property (CSS properties: opacity and visibility) for each <div> tag. So adding a <br> tag like @PointC did above would be the quickest way to have it animate the typewriter effect on a 2nd line. Happy Tweening!
  9. Hello @Alan Kell and Welcome to the GreenSock Forum! Without a codepen we wont be able to see performance issues. First i would say that you should change the CSS property top in your tweens to use y (translateY). Since animating a position offset like top (as well as left, bottom, or right) will cause your element to trigger layout which is bad for performance. Using CSS transforms will allow your element to be animated without causing a layout calculation on every render tick (frame), which means silky smoothness. See CSS Triggers - top: https://csstriggers.com/top But as far as setting CSS properties with jQuery css() method. You should use the GSAP set() method instead of using the jQuery css() method. So this way you are setting CSS properties via GSAP so it can keep track and record what CSS properties you change. Otherwise you are changing css properties outside of GSAP. So you can change the jQuery css() method from this: // change jQuery css() method $("#modelSwipeLayer").css('display', 'none'); $("#ctlTopCurve").css('display', 'block'); $("#ctlTopCurve").css('z-index', '1'); $("#ctlHeader").css('height', '40%'); $("#imgHeader").css('marginLeft', $(window).width()); $("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg"); $("#imgHeader").css('z-index', 0); $("#IndividualDashCompareDescriptionContainer").css('display', 'block'); $("#IndividualDashMeasureDescriptionContainer").css('display', 'block'); $("#imgHeader").css("opacity", 0); $("#imgHeader").css("marginLeft", 0); To this using the GSAP set() method and using the GSAP AttrPlugin for setting your image src attribute: // to the GSAP set() method and AttrPlugin TweenLite.set('#modelSwipeLayer', {'display': 'none'}); TweenLite.set('#ctlTopCurve', {'display': 'block', 'z-index': '1'}); TweenLite.set('#ctlHeader', {'height': '40%'}); TweenLite.set('#imgHeader', { 'marginLeft': $(window).width(), 'z-index': 0, attr:{ "src": '/Content/Images/hero-image-3.jpg' } }); TweenLite.set('#IndividualDashCompareDescriptionContainer', {'display': 'block'}); TweenLite.set('#IndividualDashMeasureDescriptionContainer', {'display': 'block'}); TweenLite.set('#imgHeader', {"opacity": 0, "marginLeft": 0}); But its always better to create a reduced codepen example for use so we can test your code live: Resources: GSAP set() : https://greensock.com/docs/TweenLite/static.set() GSAP AttrPlugin: https://greensock.com/docs/Plugins/AttrPlugin Happy Tweening!
  10. Hi @FilGapper Niraj and welcome to the GreenSock Forum! To better help you, you should create a reduced codepen demo example. This way we can see your code live to help you achieve what your after, since it will be hard to go just by your html markup and not seeing it with css and js in a live editable environment to test your code properly. Happy Tweening!
  11. Hello @Josef and welcome to the GreenSock Forum! Sorry your having this shaky issue. I was also seeing a slight jitter shaking of letters, but in Firefox and Chrome on Windows 10. To better help you troubleshoot this: Can you please verify what OS and OS version you are seeing this on? What Chrome version is this? I believe this is caused by the animating of the width attribute. You can see how it is less or not shaky when you comment out that tweens that animate the width attribute. Maybe you can animate scale instead of the width attribute? But we are still looking into this so i can test on an Apple device so i can see exactly what you are seeing. Thank you while we look into this for you
  12. Hi again @evomedia.lt And here is a helpful video tut by The Mighty @Carl. It goes over that immediateRender special property @mikel advised on when you use any from(), fromTo(), staggerFrom(), or staggerFromTo() tweens. Since from tweens have immediateRender set to true by default. So you need to set immediateRender: false for those from tweens. Happy Tweening
  13. Hi @Zaperela and welcome to the GreenSock Forum! Here are some helpful resources on CSS transform-origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://tympanus.net/codrops/css_reference/transform-origin/ https://teamtreehouse.com/library/changing-the-transform-position-with-transformorigin Even though SVG does not support 3D transforms at this time. That wont stop you like @PointC advised from separating your SVG into separate parts. Then you can wrap each SVG in a <div> tags and animate the <div> tags using 3D transforms. And here is just a simple example of swinging a door open and then closing it, so you can see the structure and use of transform-origin. But there are many ways to achieve what you want. Best of luck to you! Happy Tweening
  14. Hello @evomedia.lt and Welcome to the GreenSock Forum! It looks like you need to use the GSAP special property autoAlpha instead of opacity with visibility property. By using autoAlpha, GSAP will set the right CSS visibility property value for you based on the opacity value and will be better on performance. In your above code example it would be the following with autoAlpha: So to start animation you can do this: var t2 = new TimelineMax(); t2.staggerTo('.letter', 0.2, {autoAlpha: 1}, 0.1); And for your ending animation you can do this: var x2 = new TimelineMax(); x2.staggerFrom('.letter', 0.2, {autoAlpha: 0} , -0.1); When using autoAlpha and you have it fading in from 0 and you need your element hidden when the page loads. Then just add the CSS visibility: hidden to the CSS rule for your element. Then when autoAlpha animates from 0 to 1, it will automatically change visibility: hidden to visibility: visible. and then when autoAlpha animates from 1 to 0, it will automatically change visibility: visible to visibility: hidden. This will allow you not to worry about setting the CSS visibility property when using autoAlpha. You can find more about autoAlpha below: autoAlpha is part of the CSSPlugin - https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Example of usage: //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Does that help? if your still having issues please create a reduced codepen demo so we can see your code in action to better help you! Happy Tweening
  15. Jonathan

    SVG animation

    Hello @DD77 I would suggest that you read and go over what @PointC, @Dipscom, and @Sahil advised in previous post replies in this topic. I noticed that they are having to repeat and answer the same questions over and over again. There is just not enough time in the day to help you build your entire project. Especially when most of the questions are not GSAP related, and it doesn't seem like you are reading their great advice. We love to help everybody but it seems to me that your not even reading all the great help they are providing you. Especially with all the time they have spent going above and beyond to help you with non related GSAP questions. Questions that are really more about javascript and CSS basics. It doesn't look like you are trying to take there advise to heart, or even appreciate all their hard work in helping you, on their free time. All I can do is hope that you will re-read this entire Topic from page 1. Please go over all the examples they provided, and visit the Mozilla Developer Network (MDN) to learn more about Javascript and CSS. MDN JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript MDN CSS: https://developer.mozilla.org/en-US/docs/Web/CSS This way we can focus more on the GSAP API and not keep repeating questions that have already been answered in previous pages and post replies in this topic by these great scholars and gentlemen. Thank you
  16. Also after closer inspection when i debug the page. I get a security error when it tries to access the CSSRulePlugin getRule() method. So it look like that GSAP is doing what its supposed to, but the browser is throwing a security warning for the reading and parsing of the CSS stylesheet. SecurityError: The operation is insecure.
  17. This may not be related, but it looks like the browser is also throwing a warning due to excessive high memory usage of the CSS will-change property. The will-change property should only be used as a last resort to fix minor performance issues of elements. It should not be used all the time. CSS will-change: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1157760 px). Occurrences of will-change over the budget will be ignored. www.mntad.com As far as CORS, I have never messed with that.
  18. I like that tagline! Kind of play off of my.. If you make it, they will break it
  19. Hi again, To me this looks unrelated to GSAP since i'm seeing a lot of errors that happen before GSAP gets run. It looks like you have some cross domain policy security issues going on in your site. Your trying to bring in scripts from another domain which is triggering the browser sandbox security for the same origin policy https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy I see tons of errors not related to GSAP, that is why your having issues: Loading failed for the <script> with source “https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592”. Content Security Policy: The page’s settings blocked the loading of a resource at https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592 (“script-src”) undefined project.js:204 undefined project.js:205 undefined project.js:206 undefined project.js:207 I'll echo what @GreenSock Jack advised if running locally you will need to make sure your using a local testing envirnoment like XAMPP or MAPP so Chrome doesn't trigger its local sandbox for security.
  20. Hello @Mntad and welcome to the GreenSock Forum! Usually that error happens because your GSAP getRule() code is running before your CSS your trying to reference in your GSAP code CSSRulePlugin.getRule(). So if your JS is trying to getRule() that hasnt been loaded in to memory then you will get that error about accessing the CSS Rules. I notice you have a DOM ready your checking before running your code. You might want to put a window load event inside your DOM ready event. The reason being is that DOM ready doesnt check for external CSS files being loaded. That check happens with the window load event which makes sure all external aseets like images, links, fonts, CSS stylesheets, and JS scripts are loaded. Try this since your using jQuery to make sure your code doesn't run until all assets a have been loaded: // wait until the DOM is fully loaded (html, svg, markup etc) $(document).ready(function() { // wait until all external assets are loaded (css stylesheets, js scripts, fonts, images, etc) $(window).bind("load", function() { // custom GSAP code goes here }); }); Happy Tweening!
  21. Hi @Tompy and Welcome to the GreenSock Forum! I'm glad you got it sorted, let us know if you have any additional help. Happy Tweening!
  22. Hello @harp30 and Welcome to the GreenSock Forum! To do that you can use the GSAP Modifiers Plugin to create a seamless/infinite loop of your elements movement. https://greensock.com/docs/Plugins/ModifiersPlugin Here is codepen that use this concept horizontally, but can be used for vertical by using y instead of x: I hope this helps, Happy Tweening
  23. Hello @Jimmi Heiserman, To detect when an element is visible in the viewport you can try and use the HTML5 Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Happy Tweening!
  24. Brilliant .. i love how Bansky keeps sticking it to the art establishment
  25. Hello @mattchaptr and Welcome to the GreenSock Forum! It looks like whats is happening is that for some reason when scrolling there is a body class being added to the body tag adding the class lock-scroll which has a CSS property overflow: hidden. Then it removes the scrollbars and adds it again and then removes it again, all within a second upon first scrolling. That is why it does the side ways jank jiggle In your style.css .. on line 1 since i believe the file is minified, so you will need to find what is adding the below CSS in your code when scrolling. / * this is being added by your code when you begin scrolling, causing that jiggle jank */ body.lock-scroll { overflow: hidden; } Let us know if you find what is adding that overflow hidden .lock-scroll class on the body class ? :)