Jump to content
GreenSock

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

Leaderboard

  1. OSUblake

    OSUblake

    Moderators


    • Points

      10,727

    • Content Count

      4,704


  2. Carl

    Carl

    Moderators


    • Points

      8,991

    • Content Count

      9,196


  3. PointC

    PointC

    Moderators


    • Points

      8,883

    • Content Count

      3,464


  4. GreenSock

    GreenSock

    Administrators


    • Points

      8,361

    • Content Count

      13,502



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
    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.
  4. 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!
  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. 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)
  7. 8 points
    An even easier way to do this is to make the stagger value negative .staggerFrom(".box", .8, {y:60}, -0.15)
  8. 8 points
    Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening
  9. 7 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  10. 7 points
    Finding a good animation tutorial is hard. Finding one that shows how to do complex interactions with GSAP and PixiJS is going to be even harder. I seriously doubt one even exists. You're going to have to learn it the same way everybody else has, through your own experimentation and research. Start out small, and don't be so ambitious. Make a bunch of pointless stuff, and build off that. There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning. A little demo to get you started. Based on one of @PointC's first experiments with PixiJS. GSAP Resources this forum CodePen https://codepen.io/search/pens?q=pixijs&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=on https://codepen.io/search/pens?q=pixi&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=on PixiJS Resources https://github.com/pixijs/pixi.js/wiki/Getting-Started https://pixijs.io/examples/#/basics/basic.js https://github.com/kittykatattack/learningPixi https://github.com/pixijs http://pixijs.download/release/docs/index.html http://pixijs.io/pixi-filters/tools/demo/ https://pixijs.io/pixi-filters/docs/
  11. 7 points
    Hi @elpeyotl, Inline SVG means many lines in the HTML, but is great to work on and looks perfect: Happy masking and tweening ... Mikel
  12. 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:
  13. 7 points
    Hi, QuickTip of the day ... just do it ... Mikel
  14. 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.
  15. 7 points
    Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 7 points
    Hello everyone! I've finished* working on my personal website and thought I'd share it here, both because I think it's cool and also because feedback is always welcome and useful It's built with three.js but virtually all the animations are handled with GSAP. Feel free to poke around and ask me if you want to know how I approached things. https://robin-v.net *Obviously, it'll never be *truly* finished... I'm sure I'll start finding lots of stuff that needs fixing now that I've shared it, and regardless I'd like to integrate a Grav-powered blog in the future. But, you gotta show it at some point! Cheers
  22. 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.
  23. 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.
  24. 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
  25. 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
  26. 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?
  27. 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
  28. 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!
  29. 7 points
    onCompleteAll is different than onComplete callback. Following is syntax for it.
  30. 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.
  31. 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.
  32. 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.
  33. 6 points
  34. 6 points
    Nope. It's pretty clear we're not gonna make it to the finish line here. This is what we needed. function onReverseComplete() { toggle = "closed"; } Now you can create and start a new timeline each time a box has reversed. This can be applied to your actual project now. You'd just substitute the image covers for the boxes in the timeline creation function. Here's the final version. I think @Dipscom & I have gone above and beyond with you on this project and it is apparent that additional training and practice is required here. I would strongly encourage you to visit the GSAP learning area and blog. Read through everything and really try to understand it. Practice more with your own small demos and projects. https://greensock.com/learning https://greensock.com/blog/ I'd also recommend some basic JavaScript training. There are loads of online resources for that. Best of luck to you.
  35. 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.
  36. 6 points
    Hey MemeMaker, Yes it is possible to have multiple things being animated with GSAP. And yes, you got it right, you would want to create a constructor function that would take some params. Here's a Pen I made ages ago where one function creates different "views" - It's a bit complex but don't let it detain you, just go ahead and try creating the constructor function yourself, we can help you if you get stuck in the way.
  37. 6 points
    Thanks for sharing Craig. It makes me feel like one of these days all this coding stuff is just going to click in and I will be off writing really good animations and text with less worry and doubt then I have right now. In the beginning it is really hard to form questions that make sense, when basically I don't really know or understand what I am talking about. Some of your comments made me smile as in ask but then figure it out on your own and keep rolling on. My first coding is that Java Script, and I'm doing simple animations and working toward more difficult ones. Here I was smiling saying hey, this isn't so bad no math, then as the lessons increase here comes the arithmetic marching in and I said "wow" not good I really suck at math. Never could understand that stuff in school and now to learn coding I need to understand algebra. I thought this it it the end I will never learn how X & Y equal numbers, but maybe I am a bit smarter now because the way I am learning makes it all somehow make sense. Anyways, just wanted to let you know through all my rambling on, that your words have given me courage to keep going and not give up. See you around the forum!
  38. 6 points
    Interesting. Yeah, that's a pretty uncommon need, but I took a crack at accommodating it with an updated DrawSVGPlugin, so you could just add "live" to your drawSVG value and it'll keep the length updated (live). Like drawSVG:"0% 100% live". If you've got other ideas for a better API, let me know. Here's a fork of your original: I have NOT updated the official version of the plugin yet - just the codepen-only one. Let me know if it looks good to you.
  39. 6 points
    Join Club GreenSock... https://greensock.com/club That's what the ScrambleTextPlugin does. https://greensock.com/ScrambleTextPlugin
  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
    I would like to welcome the two of you to the Shock 'n Awe Club - Which I am the president. We do a lot of skulking around and a lot of falling off our chairs by simply reading the posts here.
  42. 6 points
    As a property of TimelineMax(); You can also "yoyo" the tween to get rid of a fromTo var tl= new TimelineMax({repeat:-1, yoyo: true});
  43. 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
  44. 6 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.
  45. 6 points
    This is selecting everything in your document that matches. That's why all your slides have played. var workTitle = $(".title"); var workContent = $("p"); It's better to create your animations ahead of time for something like this. Using jQuery's .map() method is an easy way to create an array-like list of objects (timelines). When a slide loads, use the index to play that animation. When a slide leaves, use the next slide index to pause the animation in its starting state so it will play all the way from the beginning when loaded.
  46. 6 points
    Hi @neeh Welcome to the forum. If you'd like to infinitely repeat a timeline, but have a pause between repeats, you just need to add a repeatDelay. Like this: var tl = new TimelineMax({ repeat: -1, repeatDelay: 1 }) Hopefully that helps. Happy tweening.
  47. 6 points
    You provided no evidence of a bug in Draggable. It's impossible to reproduce the problem you're seeing without more context, e.g. a demo that clearly demonstrates the issue. There are many other factors that could be at play like your HTML, CSS, and JavaScript. What TweenLite example isn't working? If you see it working in a demo, then it works. And what "args" keyword you are talking about? There is no such thing in TweenLite, and I have no idea where you are getting that from. The docs you're referring to are for the API, which are meant to show the properties, methods, and required inputs. Examples of how to use GSAP can be found in other parts of the site, like under the learning link. There's something fundamentally wrong with how you're trying to use GSAP. I don't what that might be, but I would highly recommend to stop doing what you're doing, forget everything that you have done so far, and do not write another line of code until you have thoroughly gone through the getting started guide and the jump start examples.
  48. 6 points
    It's gone totally off-topic now but I do want to get my hands (fingers?) dirty with it. But wait... I have to master ThreeJS, React, WebPack, SVG, GSAP, PIXI.js, PaperJS, ServiceWorkers, IndexDB, VUE, first. And answer enough questions in a cool manner here to I can stay in the leaderboard.... Oh my. Better drop my job, claim benefits to eat if I am to have the time for all of this.
  49. 6 points
    @blaasvaer I would definitely suggest coming back to GSAP when your mind is fresh. Let's be fair, we've all done this... Find something amazing, want to integrate it ASAP, and can get discouraged due to a whole slew of reasons (deadlines, frustrations, that horrible thai food you ordered last night) and fall back to our roots. (jQuery in this case... don't lie people, we've all done this one!! though maybe no so much lately ) Anyway, IMO GSAP can be as simple or as complex as you make it. There's a lot that can be done; GSAP is powerful, but it can also be the simplest tool too. If there's any one thing I could recommend to a newcomer it would be to (and frankly this goes for any new software/framework) simply browse the API Docs. Not when you have a project to build, but when you have time to devote to learning a new technology. Again, we're all probably at fault there too... lol. Not trying to assume you haven't or won't do these things, just my two cents. FWIW, here's a very straightforward "width" based solution similar to what you described in jQuery. Though some assumptions were made, (e.g. it wasn't very clear if the nav should push content or if it should "overlay" like it was a hidden sidebar nav, I assumed the later) it should be easy to follow. Worth noting though is that animating width isn't the best we can do in regard to performance. Take a look at how @OSUblake takes advantage of transforms to accomplish a nearly identical effect in this codepen: Also, another great part of GSAP.... you're in it right now. So many of these guys have helped me learn a lot about GSAP.
  50. 6 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 .
×