Jump to content
Search Community

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!

Jonathan

Moderators
  • Posts

    3,548
  • Joined

  • Last visited

  • Days Won

    133

Everything posted by Jonathan

  1. Hello @Lacika1981 and Welcome to the GreenSock Forum! Sorry your having issues. Can you please create a reduced codepen demo example so we can see your code in action to test properly? This way we can test in a live editable site to better help you and see exactly what is happening. Thank You
  2. Yes, it looks like @mikel already advised what i would have.. to use z-index to control the stacking of the active pages. Some resources: CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Understanding CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index The Stacking Context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Happy Tweening or Flipping!
  3. Hello @namisuki and Welcome to the GreenSock Forum! To make an image slider it would have many parts. As far as the flip swinging door effect, here is an example of doing that in GSAP. It uses a mouseenter / mouseleave event, but the event can be changed to click. But it will show you the HTML markup and CSS used to setup a swinging door effect, and animating the CSS rotationY (rotateY) property. Happy Tweening !
  4. Hello @wcomp and welcome to the GreenSock Forum! It looks like this is happening due to something in your SVG Markup. I could only see this in Chrome, but not in Firefox on Windows 10. I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool. https://jakearchibald.github.io/svgomg/ I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG. So now when testing in a webkit browser you do not see the border shenanigans after animating. The border was being caused by some coordinates that were causing an overflow of your path. But that online tool cleans it up now You can see in this below codepen that it no longer has that red border on the outside parts of the SVG. Does that help? SVG resources: - https://greensock.com/svg-tips Happy Tweening!
  5. When i go to that website link you provided I get an error in the console: ReferenceError: $owl is not defined 2443da7113af4abb37536a668c4fc92d.js line 25
  6. hi @franklylate, and Welcome to the GreenSock Forum! You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline. In a loop would look like this // tweens in a for loop var count = 32; for (var i = 0; i < count; i++) { introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg"); } Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method: https://css-tricks.com/writing-smarter-animation-code/ Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() : Happy Tweening!
  7. Hi @elpeyotl and welcome to the GreenSock Forum!~ Sorry your having issues. Based on your above codepen example i see that it is throwing a error on a script being loaded in, es.promise.js. Maybe its a codepen permissions issue? I didn't see any undefined variables in the codepen due to that script loading an error. Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." es6.promise.js:97 08:50:50.811 Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." e https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:412535 openStream https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:497518 f https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:496766 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 Ca https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1219538 Oa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1217188 dd https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1185311 ed https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184627 ad https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184022 Sa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206393 nb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206350 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 ve https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1191916 jb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213667 Na https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213639 es6.promise.js:97 To just output variable of getBoundingClientRect() width, then use this: var iconBoxRect = iconBox.getBoundingClientRect(); console.log(iconBoxRect.width); Happy Tweening
  8. 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
  9. 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
  10. Hello @mandooraj and Welcome to the GreenSock Forum! Thank you for sharing your GSAP project. The demos look great Happy Tweening
  11. 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!
  12. 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!
  13. 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!
  14. 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
  15. 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!
  16. 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!
  17. 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!
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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.
  24. 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.
  25. I like that tagline! Kind of play off of my.. If you make it, they will break it
×
×
  • Create New...