Jump to content
GreenSock

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

Leaderboard

Popular Content

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

  1. Using a letter makes no sense. Numbers are your friend when it comes to repeating something... and so are loops. There are many ways to do a loop, and here is one. https://codepen.io/osublake/pen/c35a7a69af6a6db997249a6111e6f930
    6 points
  2. Hi @Fakebook The issue is with the way some browsers display fonts. The issue you're talking about was discussed in some pretty good detail here: Here's a link to my pen with the closest solution: https://codepen.io/elegantseagulls/pen/bJpGog The CSS you'll need is: font-kerning: none;
    5 points
  3. You can't use the variable name top at the global level because it refers to something else. https://developer.mozilla.org/en-US/docs/Web/API/Window/top Just rename your top variable to something else.
    4 points
  4. How about this? https://codepen.io/PointC/pen/aboNbEm Happy tweening.
    4 points
  5. Hello Forrest and welcome to the forums! As Blake said, you've stumbled upon an edge case of browsers. You can use a different variable name or just use a string like ".top" to work around this issue. Happy tweening.
    3 points
  6. I honed my speed skills back in the day before I was a Mod. I would try to answer faster than Carl, Jonathan, Blake, Diaco and Jack, but would usually lose those speed battles.
    3 points
  7. @PointC - I've lost count at how many times I've gotten the notification that you've posted the solution literally moments before I hit the 'Submit Reply' button!
    3 points
  8. Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic. Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.
    3 points
  9. Then do the same thing. GSAP classes will be on the parent from inside an iframe. var box = document.querySelector("#box"); window.parent.TweenMax.to(box, 1, { x: 100 }); Depending on how deep your iframe is, you may need to something like window.parent.parent...
    3 points
  10. Why would you need to make another file? The only reason to ever create another file is for organization of your code. Make sure you proofread the file you're already working on. 'hook' can't be right. That's looking for a <hook></hook> element. Did you mean '#hook'? const scene2 = new ScrollMagic.Scene({ triggerElement: 'hook', duration: 395, triggerHook: 0.9 })
    3 points
  11. Hey @sumith, Welcome to the GreenSock Forum. Maybe these examples will help you further. Here is the duration of the scene set to a very high absolute value: https://codepen.io/mikeK/pen/VNxpPB Here's an alternative to scrollMagic https://codepen.io/mikeK/pen/BXNOgN Happy tweening ... Mikel
    3 points
  12. Hey graphsynergie and welcome to the forums, Neither of your examples seem to make use of GSAP. With that being said, Blake here on the forums has an infamous thread about smooth scrolling that you can check out if you want to learn more about how to implement smooth scrolling with GSAP.
    2 points
  13. I've built my fair share of banners. I never agreed with the amount of animation and effects pushed into them - I was quite grateful of it as it gave me something to learn some basic frontend development and animation in a contained environment. But, as a customer, I can easily see how static ads would be more performant. They are less intrusive/annoying, all the information is there for the user to see at all times and if nicely designed, they are easier on the eyes. I feel ads online are better if they follow the print world style, rather than the TV world.
    2 points
  14. Thanks for the demo! This boils down to a miscalculation in Chrome. In Firefox is looks great, as it does at a scale of 0.5 in Chrome (for me at least). The trick is to work around this bug is to set the perspective to something slightly different (like 999px compared to the default of 1000px). You should be able to do that in GSAP using the transformPerspective property, but the below doesn't seem to work in this case (but setting the transform manually to transform: perspective(999px) scale(0.786); works just fine). resizeTimeline.to('#ani-holder', 0, {transformPerspective: "999px", scale: 0.786, transformOrigin: "50% 50%"}); Setting perspective: 999px; on the parent doesn't seem to fix it either. Chrome be weird. I've asked Jack to look into it. So far he said "Hm, never seen that before"
    1 point
  15. Oh wow, That clears it up. Thank you so much for the quick response!
    1 point
  16. Thanks for this fast answer. I know my examples doesn't use GSAP, but for the first one, i know i can use scrollmagic and gsap. I will check this thread and if i have further questions, i will post them on the thread. Thanks again!
    1 point
  17. It was working in Chrome when I moved the script on the live page that you had shared previously. So no, no ideas why that may be the case. Maybe you can share a live version of the page again so we can look?
    1 point
  18. BTW sorry but this is my current demo that I'm testing with. I was messing around, trying to reproduce the issue, but if you have a device where you want to test this, this would be the new link with the logging statements in my own version of Draggable.
    1 point
  19. Any chance you could provide a reduced test case? I'm curious about this. Keep in mind that some browsers cannot report an SVG's bounding box unless it's visible in the DOM.
    1 point
  20. I always enjoyed building HTML ads before HTML5 was a thing. Like units that pulled a Twitter or Facebook feed, or a Google map in a high impact unit, but working for a publisher where my ad building was a carrot to land $$$$ from advertisers, none of my "look what I can do experiments" ended up being utilized, because either sales people did not try to sell them, or advertisers just did not want to spend the money. Hard to know which.
    1 point
  21. I've got a 25% hearing loss (50% in one ear, so if you are on my right side I will know you are talking but will not be able to understand what you are saying) and I must say (althought not comparable to a more severe type of hearing loss) it really doesn't bother me. If anything, it makes me zone out and focus quite efficiently. ?
    1 point
  22. The only way to be sure is an A/B test where the same ad, is served randomly, 50/50. Half of the impressions are the static back up, and half of the versions are the animated one. I have not found anything that shows that this isn't just blanket supposition. When I worked for a publisher, the hearing aid industry was a sector targeted for ad buying. As I had created quite a few, I was intrigued when I saw a NY Times article about a hearing aid manufacturer, learning something they had not suspected using A/B testing. The untargeted ads outperformed the targeted ones. Turned out they were being clicked on, by women in their 50s. And the targeted ads being served to older people, were not. Turns out the hearing impaired are not frustrated by their hearing loss. It is their daughters who have to yell to be heard. Obviously a lot of factors outside of our control, effect performance. And I think being left out of the reporting metrics loop, leaves us blind.
    1 point
  23. And that's why we have AMP. At its core, Google is an advertising company.
    1 point
  24. You may need to use a fully qualified URI for caching to work, but this is a server question, and you will probably get a better answer on StackOverlow. https://stackoverflow.com/ Also, caching. https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
    1 point
  25. As an outsider to the banner ad industry, I will say that animated ads are very frustrating on mobile. I can deal with static ads, but I will click away from a site if it looks like the animated ads are making the site unresponsive.
    1 point
  26. Oh, I didn't mean that your most recent demo had customizations made to GreenSock tools - I was just trying to be clear about what would make the ideal reduced test case. You've posted some other stuff that did include customizations, so I figured I'd mention it, that's all. That's what triggered my request for the most simplistic, basic reduced test case. Your codepen has a ton of other code that might (or might not) be causing issues. The goal was to isolate things as much as possible so we can get you an answer quickly and identify things accurately. It's just tough to parse through 400+ lines of code and try to understand what exactly your issue is, that's all.
    1 point
  27. We need to hold back certain things so all the mods look like we know what we're doing.
    1 point
  28. I think I identified the edge case with edgeResistance intermittently causing problems (only when dragging outside the bounds of course) - it's just a rounding thing related to browsers only having a certain amount of precision when reporting the pointer's position. I posted the revised (uncompressed) Draggable here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better? I'm not sure that's at all related to what you were originally describing, @marya. Please let me know if there's anything else behaving oddly.
    1 point
  29. Sorry about the confusion there - I've never seen that happen before but your demo helped me find a very rare edge case in the conversion algorithm where the arc command "a" could run into a Math.acos(-1) which JS returns as NaN (weird!), so I implemented a workaround and uploaded a revised MorphSVGPlugin. Seems to work great now! (you may need to clear your cache) Like others have suggested, tweaking your path would also solve the issue. But I want MorphSVGPlugin to be as bulletproof as possible Thanks for being "Business Green"!
    1 point
  30. Hi @marya, just to double check with you, this double clicking is happening when you are using the touch, right? Does it happen when using a mouse/trackpad?
    1 point
  31. Just a couple typos. //line 4 switch this tween.to('#box', 1{pacity:0}); // to this tween.to('#box', 1, {opacity:0}); // line 8 switch this const scene = new ScrollMagic.scene({ //to this const scene = new ScrollMagic.Scene({ You'll also need to load jQuery since we're using that for the resize listener. If you load that script and make those changes, you'll be good to go. Happy tweening.
    1 point
  32. Hi and welcome to the forum. Just FYI — ScrollMagic is not a GreenSock product, but we do get a few questions about it. That being said, here are a couple demos from other threads which should be helpful. You can disable the scene for certain window sizes. Here's that approach. https://codepen.io/PointC/pen/ZyZvwv You could also create/destroy the controller and clearProps depending on screen size. Here's that approach. https://codepen.io/PointC/pen/xBdBrz Happy tweening.
    1 point
×