Jump to content
Search Community

Leaderboard

Popular Content

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

  1. Hi @JMgreen, welcome to GreenSock You are very close ... `repeat` can be set just like `y` and `rotation` inside the vars object of the tween, in the vars object of the timeline (which will produce a different result), or with the repeat method on the timeline (which will produce the same result as the vars object of the timeline). Here are demonstrations of those options. *Note TimelineLite doesn't accept the repeat parameter ... so I used TimelineMax for that. Stagger does accept the repeat parameter, so we could place it directly on the tween within a TimelineLite. Happy Tweening!
    3 points
  2. OK. I see what you mean. Those examples clear up a lot of the confusion I had, although they appear a little more complicated than what you describe. The direction of the animation seems to be based on whether you are going to the prev or next slide. It looks like each slide has 2 animations, one for going to the prev slide, and one for going to the next slide. I'll try to make a demo that behaves like that later... or maybe @Sahil already has something like that. In the meantime, I would study what @Carl was showing here. And some of the examples in this thread.
    3 points
  3. Ha - of course Windows handled things completely differently. Gotta love it. I think I've got it resolved now, though. Please try again (and clear cache). Better?
    2 points
  4. Hi again @anotheruser and welcome to the GreenSock Forum! If you want to keep your existing HTML markup, you would have to also target that .text-container child <div> tag as well. Meaning another instance of splitText OR just use the SplitText target parameter to tell GSAP the CSS selector to use for targeting your .text-container children. Allow GSAP to target the elements with a CSS selector and don't use getElementsByClassName(). var mySplitText = new SplitText(".text-container > div", { type: "lines" }), splitTextTimeline = new TimelineLite(); splitTextTimeline.staggerFrom(mySplitText.lines, 1, { x: 800 }, 2); With a CSS selector like .text-container > div Happy Tweening Resources: SplitText Docs: https://greensock.com/docs/Utilities/SplitText
    2 points
  5. This is happening because you have an extra <div> tag inside your .text-container <div> tag. Otherwise you would have to target the child <div> tag in your .text-container element. <!-- i removed the style atribute so you can see the html markup in this code block --> <!-- you have this with nested child wrapped around 'home-friend' text --> <div>HI welcome <div>home friend</div></div> <!-- should be this so you have all text without that extra div tag --> <div>HI welcome home friend</div> Just remove that extra <div> tag and SplitText will split the way you want. Happy Tweening! :0
    2 points
  6. Nothing wrong with getting some experience under your belt. When I first started out, I would always end up rewriting everything several times over. jQuery show/hide is known to have performance problems. You might be able to get a little performance boost by just setting the display css directly, or with GSAP.
    2 points
  7. Ah, ok. Here is simple pen showing how to tie the progress value of a timeline to the value of an HTML5 progress element.
    2 points
  8. No, it doesn't matter which direction. Please let me know if the allowNativeTouchScrolling:false solves things for you. Thanks!
    2 points
  9. Hi! Sooo.... Looks OK on either on Chrome, Firefox, IE11 and Edge! allowContextMenu:true is still a mandatory parameter, but this is a good compromise Sidenotes: on Windows you can drag with right mouse button and looks like that on MacOS you can't. also on Mac, when allowContextMenu===false, it still attempts to open the link Thanks again for your assistance! Are you going to release the amend?
    1 point
  10. You're very welcome, @ryanf! Glad to help
    1 point
  11. Hi again! Looks like that allowNativeTouchScrolling:false solves the trouble! Sorry for the misunderstanding: I was somehow confused by documentation: Thanks again, have a nice day Massi
    1 point
  12. Hello guys! Yes this is our ad. Exactly this banner does not use any WebGL content. We checked it from our side and didn't noticed any extreme CPU usage. Yes it is a bit high but on average computer goes without any problems, slowdowns etc. The only solution I can propose is to assign somehow the priority for rendering different parts of the site. High - for game, low - for ad block. But not sure if this possible.
    1 point
  13. So you want the ball animation to fully play back in reverse, and then use onReverseComplete to call the prev/next slide? What happens if you press a prev/next button multiple times while the animation is reversing?
    1 point
  14. Isn't that what this demo does?
    1 point
  15. Just my two cents worth, but if you're loading and using GSAP for the scroll animations, I'd also recommend using it for all your animations. There would be no reason to use CSS animations when you have access to the most robust animation platform available.
    1 point
  16. It's hard to tell what's going on without any images, but using large images, or a repeating background can cause problems. In general, it's best to hide stuff that isn't visible. There's nothing wrong with removing a div in the onComplete callback. Just make sure that won't mess up your ScrollMagic stuff if the user scrolls back up. You can see what properties trigger stuff in the browser here. Properties that only trigger a composite are the best e.g. opacity, transform (x and y). But as you can see, Safari (Webkit) doesn't work like Chrome (Blink) or Firefox (Gecko). And animating background position doesn't help the situation. Stuff that triggers a layout can use a lot of CPU. https://csstriggers.com/
    1 point
  17. Don't post the same question in multiple threads. I don't know why you're trying to reverse the actual slide, but maybe these will help...
    1 point
  18. Those might be guesses about how far to animate the background, which I wouldn't recommend. That is, don't guess the distance, and don't animate the background position. Animate the position using transforms i.e. x and y. Perhaps a related issue about animating clouds. Keep in mind that HTML was not designed to handle a ton of animations. Judging by some of the keywords you use like clouds, sea, ship, alps, flame, a canavs/WebGL solution might be better. You might want to check out PixiJS. http://pixijs.io/examples/#/basics/basic.js http://pixijs.io/pixi-filters/tools/demo/ https://greensock.com/docs/Plugins/PixiPlugin
    1 point
  19. I don't suppose he's talking about one of your ads? @volcanoflash
    1 point
  20. It's difficult to know exactly what your issue is without having any URLs to check and see what is happening. I understand that you might not want to block ads and lose revenue, but you need to understand that if you're allowing ads from all kinds of places, the ads could be running all sorts of code on your website without your permission. Online advertising gets a bad rep from things like this, and it takes the community to be diligent to ensure bad actors don't flood the internet with malicious ads. (These ads might not be intentionally malicious, but just poorly coded. Or simply too heavy to be run on your website.) I've used GSAP in the creation of several thousand ads with varying degrees of complexity, it would have been rare that any of my builds had any effect on a website's performance, and if that did happen, the bugs were most likely code that I created as opposed to code created by @GreenSock
    1 point
  21. Nice demo!!! I was working on a SVG module for PixiJS. Resolution independence!
    1 point
  22. HI @Eeliya You should also take a look at the .shiftChildren() method. https://greensock.com/docs/TimelineMax/shiftChildren() Happy tweening.
    1 point
  23. Ah! what your code does at the moment, if I'm not mistaken, is create a new timeline for each scroll event – and there can be hundreds or thousands of scroll events per second when the user is scrolling! I assume you don't want thousands of identical timelines First of all, you should create your timeline outside of the scroll function. Just create it anywhere and make it paused, like you're doing now. By the way, instead of what you have, you can use this: docTimeline.to(".lightLogo", 1, { y: "200%" }) .to(".text", 1, { x: "0%" }); It's exactly the same thing, just saves you some typing. Inside your timeline, use addPause() to automatically pause it at certain points. Then, when the user scrolls, use resume() to unpause it To change the direction it's playing in (depending on whether the user is scrolling up or down), you can use reversed(). That should be enough. Lastly, have a look online at the concept of throttling and debouncing, to limit the amount of events that do get handled (there's no reason to have so many per second, you can ignore most of them without anyone noticing). Here's a recent post of mine about it: https://greensock.com/forums/topic/18197-gsap-slider-over-scroll/?tab=comments#comment-83832
    1 point
  24. Hi Eeliya, That's the expected behaviour. When you add a tween to a timeline, it's not like if you added it to the end of an array of tweens; you just added it at a specific time into an animation. So if you add a tween on the 3rd second of a timeline, it will play at that moment, regardless of what's before or after it. If you would like animations to shift, then maybe such an array is the way to go. Here's an example:
    1 point
×
×
  • Create New...