Jump to content
GreenSock

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

Leaderboard

  1. OSUblake

    OSUblake

    Moderators


    • Points

      11,463

    • Content Count

      5,062


  2. Carl

    Carl

    Moderators


    • Points

      9,056

    • Content Count

      9,211


  3. PointC

    PointC

    Moderators


    • Points

      8,922

    • Content Count

      3,467


  4. GreenSock

    GreenSock

    Administrators


    • Points

      8,880

    • Content Count

      13,861



Popular Content

Showing content with the highest reputation since 03/12/2012 in all areas

  1. 11 points
    Hello everyone, This post is going to be one of those a little long and for those more busy and timeless it is about: A person who had a dream and when he reached resolve to thank the people who helped reach that goal. Well let's go then: First, this was my first post on the forum: https://greensock.com/forums/topic/16437-animation-scale-left-to-right/ And on this date I still used Adobe Muse to make a website because I did not know anything about HTML / CSS, but I already wanted to be good, make sites cool, cool and one day I could gain recognition at Awwwards, so if you go see this post will see that mention a site that had just won this recognition. But it was impossible to win not knowing HTML and CSS, so I started to study and learned everything by scouring the internet inside, but something I was sure, to get there I would need to master doing Animations, so every day I needed to understand how it worked the GSAP. I was studying and creating new challenges and whenever I tried to do something and did not find the solution on the Internet, I was obliged to ask in this Forum, and at no time did I leave here without a useful answer, ready for me was very clear, I had found a source for learning and for evolution. So know that this is how I and many people see this forum. So after less than 2 years of many studies and many questions I finally decided to run my dream that was to gain a recognition at Awwwards, and to my surprise I did not only won as a Site of the Day but also the Developer award. A reason for much satisfaction and pride, and I certainly could not without the support, help of this incredible community, who always welcomes and helps everyone who comes here to seek a light for their goal. So thank you to all of you and as a form of gratitude and recognition I made a point of mentioning in the thanksgiving session of my website (http://victor.work) on the page about, because it is also conquest of you. (and also mentioned GSAP FORUM in my hobbies) So through all this I would like to let you know that you provide a very important role for the web community, a tool that we can evaluate as perfect and yet I see you doing the best and working hard to perfect it even more. Guys you are very importants. I'll leave the recognition link here at Awwwards: https://www.awwwards.com/sites/victor-work-folio19 Anyway, this is it: Thank you very much indeed, you guys are awesome.
  2. 11 points
    Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.
  3. 9 points
    Good news: Google pushed GSAP 2.0 to their CDN recently (for use with DoubleClick and AdWords ads): TweenMax (most popular): https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_2.0.1_min.js Everything else: https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/scrolltoplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/easelplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/raphaelplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/bezierplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/cssruleplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/roundpropsplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/modifiersplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/directionalrotationplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/pixiplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/colorpropsplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/textplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/attrplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/endarrayplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/easepack_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/draggable_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/jquery.gsap_2.0.1_min.js Notice they removed the MD5 hashes that made the old 1.18.0 links so cumbersome. Yay Google! Codepen also updated their "Quick Add" menu to point to 2.0.1. If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!
  4. 9 points
    Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.
  5. 9 points
    Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!
  6. 9 points
    An even easier way to do this is to make the stagger value negative .staggerFrom(".box", .8, {y:60}, -0.15)
  7. 8 points
    It's not a bug. That's what happens when you interrupt a from animation. If the scale is at 0.1 when you interrupt the animation, it's going to animate the scale from 0 to 0.1. Try this. // You can set this when mounted TweenLite.set(".es-bubble", { transformOrigin: 'bottom bottom', }); TweenMax.staggerFromTo('.es-bubble', 1, { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, ease: Elastic.easeOut, // force3D: true // doesn't work on SVG }, 0.1)
  8. 7 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  9. 7 points
    Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:
  10. 7 points
    Hi, QuickTip of the day ... just do it ... Mikel
  11. 7 points
    Don't set transform and transform-origin in your CSS for SVG. It will not work in every browser, especially transform-origin. By default, GSAP uses the transform attribute for SVG elements. CSS > attributes. GSAP is correctly setting the transform, but your CSS is overriding it.
  12. 7 points
    Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !
  13. 7 points
    Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.
  14. 7 points
    If you can make it, GSAP can animate it. All that site is doing is animating a bunch of coordinates. A very simplified example.
  15. 7 points
    The waark site appears to use a dom element that is the size of the window and loads all animated elements into it. Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY. See: https://www.w3schools.com/jsref/event_wheel_deltay.asp https://www.sitepoint.com/html5-javascript-mouse-wheel/ https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY With wheel events you can trigger animations with deltaY changes. Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.
  16. 7 points
    Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.
  17. 7 points
    Problem was your box was covering the buttons so subsequent clicks were not happening. You either change the z-index of the elements or change the order in html. Also, you don't need to add your tweens in the timeline, it is going to add new tweens to your timelines on every single click. Using tweenmax or local timeline is enough in this scenario. I also tweaked your conditions as second if statement was unnecessary.
  18. 7 points
    Here is simple example. Trick is to animate scaleX so element looks like it transitions out and new element comes from left and changing transform origin of your element. Also animating scale instead of width gives you far better performance.
  19. 7 points
    Great examples, guys! Here is another approach from @OSUblake using the ModifiersPlugin which isn't necessarily simple, but it is dynamic. Blake's ModifiersPlugin collection: https://codepen.io/collection/AWxOyk/ more on ModifiersPlugin: https://greensock.com/modifiersPlugin If you're animation is canned, as you say, Shaun's solution should work very well.
  20. 7 points
    You'll want to use relative offsets to allow successive tweens in the timeline to being before the previous one completes. Here is an example of that in action: And more on sequencing here: https://greensock.com/get-started-js#sequencing
  21. 7 points
    Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn
  22. 7 points
    I think I see what the problem is - GSAP doesn't natively interpolate "vw" or "vh" units (though it likely will when 2.0.0 is released, but that won't be for a few months most likely). It can set() them directly, but interpolating is different. In this case, the inbetween values are converted to px. So here's a solution that gives you the same result but just does the conversion for you at the right time: Is that what you're after?
  23. 7 points
    I don't know what you've been reading, but you can reverse TweenLite, TweenMax, TimelineLite and TimelineMax instances. It sounds like you might be expecting GSAP to behave more like a CSS animation. GSAP animations are not based on the original values of an element, like what's defined in a style sheet. When you create an animation, it will record the start and end values to animate between. Unless you're using something like a fromTo tween, the start values are going to be based on the object's current state. So if you create an animation and immediately reverse it, you're telling the animation to go back to the start values it just recorded, which is why it stops. The object is already at those starting values. So to reverse an animation, you should create it outside your event handler.
  24. 7 points
    Well, here's the start of something. Put a data-depth attribute on your element like so. 0 will be no offset, 10 will be max offset. <div data-depth="10"></div> And then create a smooth scroll instance. var scroller = new SmoothScroll({ target: document.querySelector("#scroll-container"), // element container to scroll scrollEase: 0.1, // scroll speed maxOffset: 500 }); With maxOffset set to 500, an element with a depth of 10 will move 500px. 10 / 10 * 500 = 500 A depth of 5 will move 250px 5 / 10 * 500 = 250 And so on... 4 / 10 * 500 = 200
  25. 7 points
    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: https://css-tricks.com/writing-smarter-animation-code/ And this: Happy Tweening!
  26. 7 points
    onCompleteAll is different than onComplete callback. Following is syntax for it.
  27. 7 points
    Hi @RuizBox Welcome to the forum and thank you for joining Club GreenSock. @Sahil is exactly right, drawSVG only works with strokes. The problem you'll encounter with your design is the gradients in the stroke of your logo. There are ways around this and we've had some discussions about animating gradients in strokes, but I think there's a much easier approach for you. If it were me, I'd add a mask over the top of the logo and use drawSVG to animate the mask and reveal the logo. Like this: If you have additional questions, a CodePen demo is the best way to get answers as we can easily edit your code to find a solution for you. Here's some info about that. Hopefully this helps with your project. Happy tweening and welcome aboard.
  28. 7 points
    Hi @alan0buchanan It really depends on where you look. On this forum, and places like CodePen, you're not gong to find a lot of people using ES6. Look around a place like HTML5 Game Devs, and it's a completely different story. I think most people start using ES6 because of some library/framework they are using. If a person is using React, there's a good chance they are also using ES6 because it's used in all the examples. But I've noticed that a lot of people still live in a jQuery world. The only code they are exposed to is what they see in jQuery's documentation and 10 year old answers on Stackoverflow. So I would have to say that the reason you don't see a lot of ES6 is just plain ignorance. A lot of people have never heard of it, or are misinformed. You'd be surprised by how many times people have asked me how to convert Babel into JavaScript. If you want to see more ES6 examples, people need to be informed, so help spread the word. What is ES6? It's the 6th version of JavaScript, and is also known as ECMAScript 2015. ES5 was the previous version, and came out in 2009. Why should I use it? Because it's JavaScript. There's a lot of new features that can help you write code that is cleaner, smaller, and more concise e.g. arrow functions, string templates, destructuring assignment, computed property names, classes. What is Babel? It's a tool to convert modern JavaScript (ES6) into code that can be used in older browsers. What about performance? There are some new features that haven't been optimized by browsers yet or need a polyfill. This will of course change over time, but if something is too slow, don't use that feature. Most of the features are syntactic sugar, so there should be no difference in performance.
  29. 7 points
    Just wanted to share some nice functions I came across that can be used with the ModifiersPlugin. Doing a normal modulus calculation restarts the value at 0, which may not be what you want. 500 % 500 // => 0 This function will allow you to do a modulus operation for a min/max range. wrap(500, -100, 500); // => -100 function wrap(value, min, max) { var v = value - min; var r = max - min; return ((r + v % r) % r) + min; } And this is a modified version of that function that will make the modulus value "yoyo". mirroredWrap(600, -100, 500); // => 400 function mirroredWrap(value, min, max) { var v = value - min; var r1 = max - min; var r2 = r1 * 2; v = (r2 + v % r2) % r2; return v > r1 ? (r2 - v) + min : v + min; } With the first wrap function you can do some interesting stuff, like making an object appear in two different places, kind of like in those old asteroid games. http://codepen.io/osublake/pen/XpbmYr/?editors=0010 And with the mirroredWrap, you can do stuff like creating multiple bounces with a single tween. http://codepen.io/osublake/pen/mRJeNX/?editors=0010 .
  30. 6 points
    Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you? Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.
  31. 6 points
    The secret to great morphs (or any animation really) is to take the time to properly prepare your assets. Look at your demo without any morph running. Set the visibility of the #grey to visible and hide the #map. See how that doesn't look like a finished graphic? I think you're looking for a bit much from the morph plugin here. I saw your other question on the thread I mentioned and @GreenSock gave you some good advice there about path to path or concatenating the "d" values. You could also morph the map to the main part of the logo and then draw the outer ellipse separately. When you start morphing highly complex paths, you probably won't get the morph you're envisioning. You'll most likely want to break this into pieces to get the best result. You said you weren't experienced with AI so I'd recommend taking some time to get familiar with it. With proper preparation you can make it look like one piece morphs into multiple shapes. Here's an old demo from another thread, but it shows the basics of a square morphing to/from three circles. If you have a bunch of shapes, you can create a loop to go through them. Here's an examples of that. The bottom line here is the MorphSVG plugin is amazing, but you should always do your best to help it as much as possible. That all starts in your vector software. Happy tweening.
  32. 6 points
    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
  33. 6 points
    PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles. Happy tweening.
  34. 6 points
    You were calling staggerFrom on elements with class 'element-span'. So each loop was adding same elements to the timeline which was creating conflict. You need to select children of current element instead of all elements.
  35. 6 points
    Sure, happy to help. Just in case my explanation of the easing was as clear as mud, I made a quick demo for you. It has three boxes that all tween 400px on the x and they all start at the same time. You can drag the slider to control the progress of the timeline. You'll see at 50% the Linear tween is exactly at the halfway point where you would expect it to be whereas the easeIn looks like it barely started and the easeOut looks like it's about finished. Hopefully that helps a bit. As @Carl mentioned earlier in the thread, you can upgrade to Shockingly Green to start using that MorphSVG plugin in the wild. Let us know if you have any more GSAP questions. Happy tweening.
  36. 6 points
    Hi @jsciumi The problem is your intro() timeline. In that one you're targeting the individual characters with a staggered color animation. So when you go to animate the color of the words (the parent div of those characters) it won't work correctly because you've set the color at a more specific level. One fix would be at the end of your intro() timeline you can use clearProps to get rid of that color on the characters. Hopefully that helps. Happy tweening.
  37. 6 points
    Here's a helper function to respond to media queries. function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) { var mql = window.matchMedia(mediaQuery); mql.addListener(function (e) { return layoutChangedCallback(e.matches); }); layoutChangedCallback(mql.matches); } Example usage... installMediaQueryWatcher("(min-width: 600px)", function(matches) { if (matches) { TweenMax.to(".red", 1, { x: 200 }); TweenMax.to(".blue", 1, { x: 0 }); } else { TweenMax.to(".red", 1, { x: 0 }); TweenMax.to(".blue", 1, { x: 200 }); } });
  38. 6 points
    It's hard to tell from a video. If everything else is the same as the CodePen then the only difference would be that you're using local files for TweenLite and the CSS plugin. I'd try loading both from the CDN and load the CSS plugin after TweenLite. <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSPlugin.min.js'></script> // or just load TweenMax which includes the CSS plugin. <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js'></script> CodePen also has an option for exporting the demo. (Check the lower right for the export button.) That way you can compare the version you know is working correctly against your local to spot any differences. Hopefully that helps. Happy tweening.
  39. 6 points
    There may be a better way to to this, but I'd probably skip the repeat and the yoyo and call a function onComplete. That function would set a new set of random "to" coordinates, and then start another tween which calls the same function onComplete for a new set of randomized "to" coordinates. Etc. Etc. Cool CSS grain btw.
  40. 6 points
    Hi and welcome to the GreenSock forums. Yeah, it looks like you just need to give your logo element a css position value. It's just a css requirement that you can't change the left or top of something unless it has position set to relative, absolute or fixed. try: .logo { position:absolute; } We tried to make note of this in the video but it can be missed: https://greensock.d.pr/OssUPB In most cases its better to animate transforms (x/y) instead of position (left/top). Hope this helps. Let us know if you hit any more bumps in the road. We're happy to help. Carl ps. Definitely check out this thread on using CodePen its a great way to learn GSAP and makes it super easy for us to help you
  41. 6 points
    The code is certainly based on the I Hate Tomatoes tutorial. It seems to take you through the project fairly well I would suggest going through it again to make sure you have implemented it properly and contact author as Carl suggested. FWIW it appears the initial function 'init' looks for any slides that don't have the class 'active' and makes them invisible. At the start none of the slides have this class so they are all made invisible. Try adding class 'active' to first slide in the html on load may fix it. <li class="homeSlide slide01 active">
  42. 6 points
    Hi @Tasty Sites It looks like you copied your original path and used it as a mask. That can work in some situations, but in this case you can see the path is not going in the right direction to make it work. The trick to these masks is creating your original artwork and then creating a separate mask. You line up your artwork and grab the pencil, pen or curvature tool and draw a new path along the middle of the artwork. Then add a stroke thick enough to cover everything. The sharp point in the middle could be problematic, so I think two masks would be better in this case. Here's a fork of your pen: It can be done with one mask, but there is a bit of hiccup on that bottom point. If it's fast enough, you may not notice. If it were my project, I'd go with two masks, but that's just my two cents worth. Hopefully this helps. Happy tweening.
  43. 6 points
    Hi @mrtips I'm not sure what your final project will be doing, but here's a slightly different take on your request. By using Draggable's endX and endY I have one div chase another after you throw the first one. I'm not sure if that'll be helpful for what you're doing, but thought I'd throw it out there as an option. Since you're a Club GreenSock member (thank you), you also have access to the ThrowProps plugin which has a cool velocity tracker if that is part of your master vision. More info: https://greensock.com/docs/Plugins/ThrowPropsPlugin https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.getVelocity() Hopefully that helps. Happy tweening.
  44. 6 points
    Here you go. There was a whole lot of slightly weird stuff in the codepen I forked, some things that had no use and other things that didn't follow the same coding style, as if someone else had modified the pen but still saved it in @Jonathan 's account... I'm not sure what happened there... anyway, I cleaned it edit: changed the image service to loremflickr since apparently unsplash is down...? also now it picks 10 different pictures
  45. 6 points
    Congratulations! I've made everyone in this thread an honorary member of my "You Might Not Need ScrollMagic" club. This is pretty much all ScrollMagic does. Yes, I've looked at the source code. And the problem with ScrollMagic pins.
  46. 6 points
    Hi Kim This is one of those subjective questions where 10 different people will most likely give you 10 different answers. I think a lot depends on your individual learning process. Do you prefer books, online tutorials, videos, demos, classes etc... I'm not sure there is a one-size-fits-all approach. You said you're a beginner, but I'm not sure if that means you've been coding for a month or a year. I've been doing this for a few years and there are days I still feel like a beginner. Our resident 'AI from the Matrix that escaped to the human world' @OSUblake will probably tell you that creating little games is an excellent way to learn as that will help you to think logically step by step. It's advice he's given before and I second it. It's one of the things I've been doing lately and it's a lot of fun in addition to being a wonderful learning experience. As far as real world projects go, I think what you're doing by reverse engineering CodePen demos is an excellent way to learn. I'm not sure about any particular classes that take you from concept to conclusion. Others may have some links and ideas about that. I think the biggest thing is just keep writing code. Everyone writes bad code and starts out knowing nothing at the beginning of their coding journey. Write code, write code, write code and then write more code. If you do that and learn a new thing each day, everything will start to click and you'll have may 'ah-ha' moments as you progress. I'm sure others will jump in here, but that's my little 'ol two cents worth for you. Happy tweening.
  47. 6 points
    Hi @Awmat, 1. Look at this part of the docs: 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. //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}); 2. Please take a look at these explanations: https://greensock.com/position-parameter And: try the GSdevtools (more here) - its a great help. Just a few modifications here: Happy tweening ... Mikel
  48. 6 points
  49. 6 points
    Very interesting - it looks like this has nothing to do with GSAP but is related to how some browsers "optimize" SVG rendering in certain situations. If you remove the "perspective" that you set on the SVGs, and make autoAlpha go to 0.99 instead of 1 on those same elements, it resolves things (at least in Firefox that I tested it in). So just 2 changes to your code. Most browsers force anything that's got a 3D-related property set (like perspective, rotationX, rotationY, or z) to get rendered on the GPU, thus it creates a texture for it, often at the original raster size and since you're scaling this up to 20x its normal size, things are getting pixelated when that texture is stretched up. The other odd thing was how the browser decided to totally shift the rendering as soon as its opacity was 1 (but 0.99 was fine). Does that help?
  50. 6 points
    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 ) https://greensock.com/position-parameter 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!
×