Jonathan last won the day on August 6

Jonathan had the most liked content!

Jonathan

Moderators
  • Content count

    3,393
  • Joined

  • Last visited

  • Days Won

    124

Jonathan last won the day on August 6

Jonathan had the most liked content!

Community Reputation

4,698 Superhero

5 Followers

About Jonathan

  • Rank
    Super Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    United States
  • Interests
    Traditional Animation, Computer Animation, Drawing, DJing, Mycology, Traditional Chinese Medicine, and Herbalism

Recent Profile Visitors

21,375 profile views
  1. Jonathan

    Problems with border-bottom/top-radius

    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!
  2. Jonathan

    loop back to beginning on a slider

    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
  3. Jonathan

    Have animations use less resources or pause when not on screen?

    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!
  4. Jonathan

    For all BANKSY fans

    Brilliant .. i love how Bansky keeps sticking it to the art establishment
  5. Jonathan

    Tweenmax scale to performance issues (jumpy, intermittent)

    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 ? :)
  6. Jonathan

    Split text delay issue

    Hi @Tompy and Welcome to the GreenSock forum! I tested your codepen in latest Firefox (62.0.3) and Chrome (69) on Windows 10. I could not see a delay in any of the 3 animations. Are you seeing this on an Apple desktop or mobile device / computer? What OS and OS version are you seeing this on? What browser and browser version are you seeing this on? Any additional info will help us help you figure why your seeing this delay. Thanks
  7. Hi @jungleD and welcome to the GreenSock Forum! Sorry your having trouble. Thank you for all the helpful information. To help speed up trying to find out what is going on. Can you please can create a reduced codepen demo example of this, it will help us to test in live editable environment so we can better see why this is happening. We would sure appreciate it: Thanks
  8. Jonathan

    Using the Ternary Operator to trigger a tween on a timeline

    Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening
  9. Jonathan

    Using the Ternary Operator to trigger a tween on a timeline

    Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help
  10. Jonathan

    Using the Ternary Operator to trigger a tween on a timeline

    Hello @emilychews and Welcome to the GreenSock Forum! To make your code run on just the page you want without throwing that error when it doesn't exist... You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero: var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length > 0) { // your gsap and other code goes here } And with all your code: Happy Tweening!
  11. Hello @Friebel and welcome to the GreenSock Forum! I remember reading awhile ago that Safari will throttle down the RAF on cross-origin iframes content until they are interacted with. Maybe it also effects non cross-origin iframes as well. Maybe you can fake trigger an interaction event handler on the iframe when the page loads, but I'm just pulling at straw here. The browser might be treating that non interacted iframe as an inactive browser tab. When the browser tab is inactive the browser will automatically throttle down the requestAnmiationFrame (RAF). So that same logic would dictate that the iframe needs to be interacted with so it gains focus. But if its a cross-origin iframe than that is a security sandbox issue. Happy Tweening
  12. Jonathan

    Overlay end and slide from left to right on mouse leaves

    Hello @hybreeder and welcome to the GreenSock Forum! For color mouse hover text color.. this should be as simple as just positioning your elements within the anchor tag with z-index. Forking @mikel codepen of your codepen. You should wrap your anchor tag (.tbtn) text with a <span> tag Give that span CSS position: relative and z-index: 2 .t_btn span { position: relative; z-index: 2; } <a href="javascript:void(0);" class="t_btn btn_bg t_btn_about"> <span>Hover me</span> <div class="hover_overlay"></div> </a> Then: give .hover_overlay a z-index of 1. (never use negative z-index like -1, since it doesn't work cross browser, only use positive z-index values) Happy Tweening!
  13. Jonathan

    Animation not smooth on iOS

    Hello @frankallen and welcome to the GreenSock Forums! Are you seeing this in iOS Chrome or iOS Safari? Without an example like @Shaun Gorneau advised, it will be impossible to narrow down what is happening on a live site. It is hard to debug a live site without isolating just your GSAP code. Please create a reduced codepen demo example so we can test your code in a live editable environment to better help you. Thanks
  14. Jonathan

    replaceChild and TimelineMax

    Hello @benoit Can you please give us more details on what exactly you are trying to do. Its confusing since in your code it keeps replacing a child with the same exact <div> element with the same class and the same text value. Any reason why your doing that? All that will do is cause some layout thrashing of constantly trying to animate something that is affecting layout calculations for the same element. Also keep in mind that when animating transforms you should set the CSS position to absolute so it doesn't cause a reflow of the layout in the document flow. Any additional information will be helpful in letting us know how we can help you Resources: https://www.impressivewebs.com/absolute-position-css/ https://www.w3.org/TR/css-position-3/#abs-pos
  15. Jonathan

    Is it possible to tween CSS Pseudo-Elements (like :after)?

    Hello @webrhythm and Welcome to the GreenSock Forum! Here is an example of using the CSSRulePlugin with a GSAP timeline, using TimelineMax. Happy Tweening!