Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 04/04/2019 in all areas

  1. No need for a new thread, but thanks for asking. You can't nest plugin values inside each other, so tweening attr plugin values inside the bezier plugin isn't going to work. However with SVG circles you can animate their css transforms so it is totally possible animate their x and y using bezier plugin https://codepen.io/GreenSock/pen/GLZNZB?editors=1010
    3 points
  2. Here is a CodePen briefly illustrating the user's scroll position dictating the timeline's progress. https://codepen.io/sgorneau/pen/mgPrRW
    3 points
  3. Hi and welcome to the GreenSock forums, Thanks for the demo. In the future, please try to simplify as much as possible. For instance we don't need paths with tons of points, or many paths. The simpler the data structure the better. That said there are 2 issues that jump out: 1: Your values for cx and cy seem to be undefined in your notWorking() function as shown by a simple log. Please add the console logs below to see the issue: function notWorking() { for (i=0; i < ids.length; i++) { // selecting the circle var p = document.getElementById(ids[i]) console.log("this is a problem" + paths[ids[i]].cx) console.log("this is a problem " + paths[ids[i]].cy) var tl = new TimelineMax() tl.to(p, 0.24, { cx: paths[ids[i]].cx, cy: paths[ids[i]].cy, ease: Linear.easeNone }) } } 2: svg circles do not have cx and cy properties or css values, they have cx and cy attributes. To animate those values with GSAP you need the AttrPlugin. Here is a basic example of how it works: https://codepen.io/GreenSock/pen/qwZOJz I think once you get proper values and pass them into the attr plugin you'll be in a better spot. If you still have problems, please try to reduce the amount of data a bit so that its easier to help. thanks.
    3 points
  4. Hello @gregor and Welcome to the GreenSock Forum! Can you please create a limited codepen example so we can see your code in action to better see what your seeing? This way we can better help you! Happy Tweening
    3 points
  5. Hello @jimmylet and welcome to the GreenSock forum! Yes a cool effect indeed, i will take a crack. Based on inspecting that page. It has the main image that is stacked on the bottom. Then a <canvas> tag is stacked above the main image with an opaque blur that is either a transparent blur or it's a canvas sample copy of the main image with an added blur effect. So basically 2 layers stacked, of the main image on the bottom and the blurred canvas image on top. Then mouse movements are detected when hovering over the canvas image to reveal a paintbrush mask that allows full transparency so you see through the <canvas> tag and see the main image underneath. That is what i got from inspecting that slider. I only saw the effect work in Chrome, but Firefox and MS edge did not show the slider for some reason, only Chrome did. Happy Tweening!
    3 points
  6. Hi and welcome to the GreenSock forums. It sounds like you aren't loading CSSPlugin (included in TweenMax). If you want to tween css transforms like x,y,skewY, skewX etc, you need to have CSSPlugin present because images do not have x and y properties that can be tweened. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js Check out the Getting Started article: https://greensock.com/get-started-js or docs: https://greensock.com/docs/Plugins/CSSPlugin for more info
    3 points
  7. Hi Carl, thanks alot for the quick reply. It helped me a lot. The CSS Plugin was indeed missing. Cheers Adrian
    2 points
  8. classList.contains() only accepts a single class name. You check those two with an or operator if (e.classList.contains("play-button") || e.classList.contains("primary-link")) { return true; } More info on classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Happy tweening.
    2 points
  9. Came across some cool HTML5 banner ads while doing some casual browsing and figured I share them: Verizon Fios (GSAP): https://s0.2mdn.net/3950987/1441292307159/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600.html Jeep (GSAP + EaselJS): http://s0.2mdn.net/ads/richmedia/studio/pv2/38170525/20150831144144032/ Muppets (GSAP): https://s0.2mdn.net/4139733/1440792288892/300x600_MPT_Muppets_LightRB_HTML5_Sept22.html Google Music (GSAP + SVG) https://s1.2mdn.net/ads/richmedia/studio/pv2/37557754/20150731072517615/ Do you have any HTML5 GSAP ads to share? We would love to see them
    1 point
  10. I think the problem is (if I'm understanding you correctly) is that progress is not set with x% ... it's set with a value 0 to 1 (.5 being the halfway or 50% mark). So, you should not deal at all with % or +/- values when setting progress. It would simply be a calculation of scrollPosition/documentHeight. That formula will always return a positive value (save for elastic scrolling where negative values can become a factor) >= 0 and <= 1.
    1 point
  11. Thanks so much for the response, In typical fashion I figured out my issue after posting the question. I was querying h1, and p at the same time and React did not like that at all. I'm sure there's a specific reason I can't do that, but for now it's working so that's good enough for me. As for yPercent - thanks for the recommendation, definitely want to develop good habits when working with GSAP so will definitely change.
    1 point
  12. So why not use a blurred version of your bitmap on a layer above, in Animate and fade that out. Or a semi transparent overlay that makes the underlying image appear to be blurry? I did a semi transparent frost on a window overlay reveal for a holiday beverage ad, that was a vector from Shutterstock.
    1 point
  13. Phew! After several hours of hunting, I figured out the issue. Thanks so much for reporting this and for being patient with my travels. There was indeed a regression in 2.1.0 through 2.1.2 that could affect reversed timelines that have a pause added with addPause(). It should be resolved in the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Does that resolve things for you?
    1 point
  14. Thank you for your help. I found a solution by replaced setTimeout with TweenMax repeat. The first codepan also had a bug with how the initial height of elements was calculated. Below is a working version.
    1 point
  15. @PointC See?? the binary system is at fault here, so you should blame the Egyptians, Indians, Chinese, Leibniz (I think that's the way is written) and the geniuses that thought it was a good idea to use it on IT. We're all victims here
    1 point
  16. Well, there you go. That's why Jack wears the green cape and I just wear on old sweatshirt.
    1 point
×
×
  • Create New...