Jonathan last won the day on October 13

Jonathan had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Jonathan last won the day on October 13

Jonathan had the most liked content!

Community Reputation

3,966 Superhero


About Jonathan

  • Rank
    Super Moderator

Contact Methods

Profile Information

  • Gender
  • Location
    United States

Recent Profile Visitors

19,096 profile views
  1. PHP not playing nice with Draggable

    Hello @Nineve .. Yeah Jack is right about the zoom property The CSS zoom property is not even compatible in any version of Firefox. So you should really be using CSS transform scale instead of zoom if you want full cross browser compatibility. Its not really a good thing to use the zoom property! Its only purpose was to fix bugs in earlier versions of IE's hasLayout property, which was riddled with render bugs. Also when you use the CSS zoom property in Chrome, it will have to apply it twice.. first for zoom property and then again with transform scale property. So your looking at a performance hit in Chrome. If i were you, as best practice I wouldn't use the CSS zoom property, but just use the CSS transform scale for a much happier animation.
  2. How is this tweenmax scrolling animation done?

    Hello @jrobertblack and Welcome to the GreenSock Forum! Well there could be a number of things to make your animation more smooth. It really depends on what you are doing in your code. If you could please provide an example of what your trying to do we can better give you advice. It could be as simple as you trying to animate CSS position offsets like top, left, right, or bottom.. Instead of animating with transforms like translateX or translateY. Animating position offsets will always give you jank (lost frames) since position offsets like left and top need to always trigger layout on every render tick which will give you shakey or jittery motion. So please provide an example of your code so via codepen so we can help you better. Happy Tweening!
  3. Uncaught Cannot add undefined

    Hello @timdtand welcome to the GreenSock forum! This is happening due to not returning your timeline in your timelineone function. GSAP add() method expects a timeline being returned when you have a function. So your missing this inside timelineone() fucntion return tl; And all together function timelineone(){ var tl = new TimelineMax(); tl.from(".tekst1",1,{x:250}) .to(".tekst1",1,{scale:0.1,autoAlpha:0}); return tl; // your missing this line } And now you can see your animation run Checkout this CSS Tricks Article by the Mighty @Carl on how to write smarter animation code: And this: Happy Tweening!
  4. Positive and negative points of Greensock

    Hello @aniek6 and Welcome to the GreenSock forum! Well it seems you have a heard a lot of positive things about GreenSock, glad to hear that. Now for the negative things about GreenSock GSAP: GreenSock has the habit of making you less stressed due to making simple animation tasks easier GreenSock will help you sleep better at night since you will be able to get projects done faster GreenSock has a great community that will selflessly help you with your questions As you can see the negatives are a real bummer, How dare they Happy Tweening!
  5. Hello @fredcorr and welcome to the GreenSock forum! Sorry your having an issue! When i look at the code being outputted i see SplitText applying the custom class you have on each line: Frame1lines1 Frame1lines2 So there is a way for you to target those lines for applying position to each line. I also see SplitText adding a separate <div> for each word within each of the <div> lines: Frame1lines1 and Frame1lines2. Try opening your browser inspector and you will see the <div>'s SplitText creates for lines and words. I looked at IE11 and did not see this issue. I presume you are on Windows 7? If you are viewing in IE10 i strongly recommend you update to IE11. Microsoft doesn't even support IE10 anymore. Last security update for IE10 was in January 2016. Unless I'm missing something here? Let's see if others are seeing what I'm seeing after SplitText splits your lines and words into usable markup?
  6. Why Cant i animate this SVG with svg Draw

    Hello @RuizBox and welcome to the GreenSock forum! Here is a link to the DrawSVG Docs so you have a reference on what is required to use DrawSVG DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Hopefully this helps! Happy Tweening
  7. Sequencing Tweens with Scrollmagic

    Hello @sirwin and Welcome to the GreenSock Forum! So in the link you provided what are we supposed to look at, since you have a lot going on in that site? What do you want us to scroll down to? If it was me i would first get the animation you want and then incorporate ScrollMagic which controls the animation via scroll. Here you can see a video tut by The Mighty @Carl on how to sequence tweens And this on how to use the position parameter: Are you asking how to use ScrollMagic or how to animate something with GSAP. I'm sure if you create a limited codepen example we can better help you. All you need is a couple of tweens in the codepen so we can help you get the animation your after. Thanks
  8. Make character look the other way on reverse

    Hello again @thatkookooguy I would think it is ScrollMagic that is triggering your character to run at the end of the path immediately. Since your GSAP timeline has paused: true, and ScrollMagic is what is controlling the timeline with scroll events. You could try a couple of things and see if it helps 1) You could try and wrap all your code inside a DOMContentLoaded event and a window load event so this way your code wont run until the DOM is ready and the window is fully loaded. Something like this: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { window.addEventListener("load", function(){ // place your code here }); }); 2) Since you are using a from tween, in your case a fromTo() tween. You could add the special property immediateRender: false to your fromTo() tweens vars parameter, to make sure that the tween isnt run immediately. That is because from tweens by default have immediateRender set to true. But again ScrollMagic is controlling the tweens so that is what is handling running the animation on scroll event. NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins. So see if that works and let us know if your still having issues like your seeing in Safari. If you are you might have to check the ScrollMagic Issues page and see if anyone else having that issue of ScrollMagic firing animation right away on load. The reason i recommend to ask ScrollMagic git Issues page is because even though ScrollMagic is made with GSAP, it is not made by GSAP. So they would be the best to help you on specific ScrollMagic bugs or issues. Happy Tweening
  9. Make character look the other way on reverse

    @thatkookooguy Glad you figured it out! One thing you should do is use the GSAP set() method instead of the to() tween with a zero duration. The GSAP set() method is basically a zero based tween, so you wont have to use a to() tween with duration 0. GSAP set(): So you should change this for all tweens with a zero duration, for example change this:'.character#char1', 0, { opacity: 0 }, 2);'.character#char2', 0, { opacity: 1 }, 2); Into this using set() anim.set('.character#char1', { opacity: 0 }, 2); anim.set('.character#char2', { opacity: 1 }, 2); Other than that great job.. but where is Luigi?
  10. Responsive SVG's - unwanted borders when animating

    @helleholmsen it seems that this is only happening on macOS Sierra, since i tried looking on iPad 2 on latest chrome 61 and could not see the border. So it must be something on that macOS Sierra version 10.12.6. Maybe there is someone in the forum who has that version and macOS and can offer some advice? But i cant since i dont have a macOS only iOS.
  11. Make character look the other way on reverse

    Hello @thatkookooguy and welcome to the GreenSock Forum! My example below only shows your character facing backwards when scrolled up but not left to right, since i didn't have time to do the reverse backwards for side to side. Looks like you would need to add a class that places the CSS background-position-y at the value of 40px. So this way it displays the sprite image in a backwards state. If it was me i would add a new CSS rule like this that just handles the character to face up when scrolling up (so his back is facing you as he walks up): #char1.backwards, #char3.backwards, #char5.backwards{ background-position-y: 40px !important; } Notice i added !important declaration, that makes sure the background-position-y is always 40px for your image sprite to dispaly back of character. This way you would add the .backwards class when your character is getting scrolled up and is supposed to be walking up the page. So you would add that class when he walks up, then remove when he is walking from left or right. And add back again when he is moving up with the scroll-bar. Then binding an event to the mouse scroll wheel, detect if the scroll bar is going up or down. Then add the class .backwards to those 3 elements (#char1.backwards, #char3.backwards, #char5.backwards). But checking the scroll direction should probably be done with ScrollMagic enter event and check the event.scrollDirection for reverse (scroll up) or forward (scroll down). Since mousewhell can be buggy. Then you just need to detect two things on whether you add the .backwards class detect when scroll-bar is scrolling up and if your character is supposed to be walking facing up (you can mimic what i did for facing up for when you nee to face the character left or right) So this can be done with a simple add and remove of a CSS class and event binding for mousewheel or using ScrollMagic enter or update event to detect scrolling up and down. But others might have a better way of adding and removing the class either in the tweens and timeline or via scrolMagic event. Happy Tweening!
  12. Responsive SVG's - unwanted borders when animating

    Hello @helleholmsen and welcome to the GreenSock Forum! I tested on Windows 10 on latest Firefox and Chrome. But could not replicate the light grey border you describe. What is the OS and OS version you see this on? Also what is the browser and browser version you are seeing this on? Any additional info can help us see what your seeing, Thanks
  13. Valid Labels

    Hello @multivac and welcome to the GreenSock forum! The label names are created by you, so you can use any name you want, so they will be valid. Now as far as the use of labels in a tween, read below: The parameter that labels go into are called the position parameter.. see here for more info: .to( target, duration, vars, position ) position: * (default = +=0) — Controls the placement of the tween in the timeline (by default, it’s the end of the timeline, like “+=0”). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a “+=” or “-=” prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after “myLabel” or "myLabel-=3" to insert it 3 seconds before “myLabel”. If you define a label that doesn’t exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient. Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video. Happy Tweening!
  14. GreenSock Psychill Fun

    Hello @mi_cky and Welcome to the GreenSock Forum! Thanks for sharing
  15. Problem with debugging in chrome

    No worries.. here are some references: x = translateX() y = translateY() z = translateZ() rotation = rotate() rotationX = rotateX() rotationY = rotateY() rotationZ = rotateZ() (same as rotation) scale = scale() scaleX = scaleX() scaleY = scaleY() scaleZ = scaleZ() skewX = skewX() skewY = skewY() CSSPlugin Docs: 2D transforms: 3D transforms: Happy Tweening