Jump to content
Search Community

Leaderboard

Popular Content

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

  1. Shaun Gorneau test
    Hi @Chelsea and welcome to the GSAP forums! A few things I would do in this case. First, I would use a Tween to position the playhead by frequently polling the audio's currentTime/duration by using setInterval, clearing the interval onPress and recreating onRelease (in addition to the audio controls that happens in those events). I prefer an interval to an audio ontimeupdate event because ontimeupdate's frequency is all over the map. That way it's a simple positioning (as a % or the overall scrubbers width) vs modifying a timeline's playhead (i.e. progress) in parallel. That way you can remove all your timeline stuff and use a simple Tween with the setInterval. Hope this helps!
    4 points
  2. Carl test
    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
    4 points
  3. PointC test
    Hi @SimonDucak Looks like you just missed the ThrowProps plugin in your demo. Here's the CodePen version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js Happy tweening.
    3 points
  4. Shaun Gorneau test
    Hi and welcome to GSAP A few quick issues I noticed before getting into how you can use GSAP to accomplish what you described. You should omit the opening/closing <html>, entire <head>, and opening closing <body> from your CodePen. CodePen basically is setup in a such a way to assume all the html you provide is within the <body></body>. You did a good job of including your scripts through CodePen's settings and providing the necessary CSS within the editor. You also included duplicate code blocks within your Javascript ... everything within and including $(document).ready(function() { ... } OK, with all that said, I've forked your pen and modified a few key things. Namely, removing the use of Timelines and using TweenMax in the over/out functions. Another key thing is that var $items = $('.content-text span'); as a selector is targeting all of those elements (within the hovered tile and all other tiles) at once. You only want to target those elements within a tile being hovered/unhovered (over or out). So I moved that selector to be within the scope of the tile being over/out Example function over(){ $items = $(this).find('.content-text span'); //<-- $(this) being the hovered TweenMax.staggerTo($items, 0.4, { y: 0, autoAlpha: 1, ease: Power4.easeInOut }, 0.1); } You'll notice that the initial hover is not moving the items from a lower position up. That's because the hover function has them resting at y:0 and the out has them moving down to y:20. So only after `out` runs on each tile will they be in a position to "move" up to y:0. There are a few ways to tackle that, but I went for a simple one ... simply set all to y:20 on page load. TweenMax.set( $('.content-text span') , {y:20} ); Now the initial hover Tweens them up to y:0. Here is a CodePen showing it all in action Happy Tweening!
    3 points
  5. OSUblake test
    https://mackay2588.github.io/ https://github.com/mackay2588/mackay2588.github.io Minor problem only in Chrome? Edge is using over 40% of a GPU just sitting there, and that is on a gaming PC. You simply have too many animations going on, and animating "left" instead of "x" only makes it worse.
    3 points
  6. PointC test
    I prefer Draggable for that type of control. Something like this: Hopefully that helps. Happy tweening.
    3 points
  7. Shaun Gorneau test
    Tough to see what is happening here with just a few lines of code ... if possible, a CodePen would give us a better opportunity to help. But, I suspect your issue is due to translating the `X` value vs changing the `left` value. The tween is affecting `x`, so the style.left property will remain unchanged. So we have to get its translated value relative to its initial offset.
    3 points
  8. Shaun Gorneau test
    Hi @mary92 and welcome to GSAP! You may or may not need ScrollMagic here ... there are many cases where ScrollMagic is not needed for a parallax effect. I have two examples of navigating that produce a parallax effect; one where I use ScrollMagic and one where I don't In this one https://www.reynoldslakeoconee.com/golf I do use ScrollMagic to trigger the parallax movement at specific timings ... as each background image comes into view. (for some reason there is some jankiness in Firefox that I have yet to figure out ... Chrome gives the best result, Safari gives an acceptable result, Firefox is pretty bad) For this one https://www.reynoldslakeoconee.com/our-community/blog, a slider, I do not use ScrollMagic and just allow the slide transition Tweens to account for the parallax movement. It's the slider at the top ... it's not a true "parallax" effect, but uses the same principles which can be adapted for a more immersive parallax. Maybe picking them apart can help you?
    2 points
  9. Visual-Q test
    It's a bit hard to tell what you are trying to achieve. The example you show is a nicely functioning slider but doesn't really indicate what you are trying to achieve with respect to parallax. By smooth parallax do you mean you don't want a slide to slide transition and want to scroll the DOM as normal with animations occurring during scrolling or do you want slide to slide scrolling as you have now with animation occurring inside the bounds of the slides? If you're not sure of the type of effect you want perhaps search parallax scrolling websites on google or codepen to find something you like. Perhaps then we could offer some more specific advice. Maybe someone else here can chime in with some examples?
    2 points
  10. Chelsea test
    That works great. Thanks!
    2 points
  11. Shaun Gorneau test
    Welcome to the forum @thedurf18! A few quick questions ... Is this series of images supposed to produce an animation effect? Or is it more a "slideshow" of images? What is the approximate minimum and maximum frequency that you envision these images changing? (i.e. 1 image per second, 10 images per second, etc.) Are these hard cuts from one image to the other ... or should there be any transition between the images (e.g. a cross fade)? How many images in total?
    2 points
  12. Acccent test
    Hm, I don't know why that would happen, it works fine on my computer. It might come from the fact that you're using deprecated events – you should use 'wheel': $window.on("wheel", stipple(onMouseWheel, {delay: 0.2, leading: true})); function onMouseWheel(event) { if(event.originalEvent.deltaY < 0) { // go up (or down, I can't recall) } else { // go the other way } } More info here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel (that page also provides a convenient polyfill for older browsers)
    2 points
  13. Oliver16Years test
    Hi, Best if You make a Timeline and chain the tweens in it like this: var tl = new TimelineMax( { repeat: -1 } ); tl.from('#hed1', .5, {delay:.2, alpha:0, y:'-=20'}) .from('#orange_boat',2, {delay:3.75, top:'+=150', left:'-=350', ease:'Quad.easeOut'}) .from('#whiteboat_one',2, {delay:0, top:'+=0', left:'-=0', ease:'Quad.easeOut'}) .from('#whiteboat_two',2, {delay:0, top:'+=0', left:'+=0', ease:'Quad.easeOut'}) .to('#hed1', .3, {delay:4, alpha:0, y:'-=75'}) .to('#orange_boat',2, {delay:6, top:'+=128', left:'+=38', width:'140px', ease:'Quad.easeOut'}) .to('#whiteboat_one',2, {delay:6, top:'+=0', left:'-=0', width:'99px', ease:'Quad.easeOut'}) .to('#whiteboat_two',2, {delay:6, top:'+=30', left:'+=30', width:'80px', ease:'Quad.easeOut'}) .from('#hed2', 1.5, {delay:7, alpha:0, top:'+=0', ease:'Back.easeOut'}) .from('#cta', 1, {delay:4,alpha:0}) .from('#cta>em', .5 , {delay:4.5, alpha:0}); .to('#cta',.5, {delay:5,'backgroundColor':'rgba(200,255,255,1)', repeat:3, yoyo:true}); The -1 value of the repeat: key means infininte loop. If You worry about the file size just link GSAP from CDN: <script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.1_92cf05aba6ca4ea5cbc62b5a7cb924e3_min.js' ></script>
    2 points
  14. Barrett test
    Hi Shaun, Acccent, Both of these solutions worked perfectly. Thank you for your help and quick reply. Thanks Barrett
    2 points
  15. GreenSock test
    I might be misunderstanding the question, but perhaps you could simply set up a TimelineLite with a bunch of evenly-spaced set() calls that either change the visibility of images or a single image's src (though the latter could be problematic performance-wise because the browser would have to load them at that point), and then update the timeScale() of that TimelineLite in accordance with your tempo. Just an idea.
    2 points
  16. Carl test
    Hi and welcome to the GreenSock forums, Your link re-directed me to: https://pages.github.com/ Without seeing a reduced test-case, my first suggestion would be to remove ScrollMagic from the project entirely and see if the troublesome animations exhibit the same behavior on their own. If not, then its a pretty clear signal that ScrollMagic (or scrolling in general) is causing the issue. If your animations aren't performing well without ScrollMagic, then you can make a super reduced CodePen demo that only has enough code to replicate the problem and we should be able to advise you fairly quickly.
    2 points
  17. Carl test
    Just jumping in quick regarding the use of sliders to control an animation. In addition to PointC's clever Draggable version you can also use an HTML input element as shown below <input id="progressSlider" type="range" min="0" max="1" value="0" step="0.001" /> And for the most flexible, responsive, powerful and easiest-to-use, I would suggest GSDevTools. It is a Club GreenSock membership bonus that will save you tons of time: Learn more about GSDevTools: https://greensock.com/gsdevtools And since you're already a member you can grab it now
    2 points
  18. PointC test
    It looks like Shaun is working on an answer, but I'll jump in quick while we wait for his reply. You've got a couple issues with the project. To wire things up from my demo to your project, you'd need to target your masterTl timeline with the draggable element and all the event handlers. 1. Wiring a slider up to an infinite timeline (you have repeat:-1 on several nested timelines) is tricky. I would imagine you'd want users to be able to scrub the animation from start to finish so I've removed the repeats in my fork. 2. The other issue is setting the dragger bounds to 100% instead of a fixed width. This can work by getting the width of the bounds and restricting the dragger to those coordinates. The trick is on resize. You need to listen for a resize event and set new bounds as well as re-position the dragger correctly so it's at the same percentage point of the new bounds. Here's a fork of your pen with everything working correctly. Happy tweening.
    2 points
  19. Shaun Gorneau test
    The only jQuery I see is the button handlers ... $('#someButton').click( function(){ ... }); You can swap that out for plain JS like so someButton = document.getElementById( 'someButton' ); someButton.addEventListener( 'click', someFunction ); function someFunction(){ // Do some things }
    2 points
  20. Acccent test
    Also, just a small additional note, the delay for new timelines is 0 by default so you can just do leftClick = new TimelineMax();
    2 points
  21. PointC test
    Hi @dimka Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Here's a fork of your pen with that change. Hopefully that helps. Happy tweening.
    2 points
  22. Acccent test
    Hi miks, you probably need a debounced function for this – a function that only activates once if it keeps getting called without a minimum time passed between two calls. https://css-tricks.com/debouncing-throttling-explained-examples/ You can either make one yourself, or use one that comes with lodash or underscore.js, or use this one that uses GSAP behind the scenes (and which I made): https://codepen.io/Acccent/pen/OQxjOx If you do use that one, you can do so like this: $window.on("mousewheel DOMMouseScroll", stipple(<your call>, {delay: x, leading: true})); (delay is the time that needs to pass without any scroll events before a next call can happen.)
    2 points
  23. Visual-Q test
    Here's are some tutorials from from Peter Tichy that will walk you through basic Scroll Majic use including a parallax tutorial that should get you pointed in the right direction and help you determine if Scroll Majic is the tool for you. https://ihatetomatoes.net/product/scrollmagic-101/?utm_source=GW&utm_medium=banner&utm_campaign=S101 banner demo
    1 point
  24. GreenSock test
    You won't realistically be able to have anything run at 120fps in the browser. requestAnimationFrame runs at 60fps max, plus it'd be a lot to ask of the browser to flip through images like that. But the technique I described above should still work fine - it'll just update the screen 60 times per second but it'd get through the images in the same way (as if it were 120fps...just with fewer screen updates in the process). I imagine a video might be lighter size-wise. Good luck, though.
    1 point
  25. Acccent test
    If you want to show a sequence of images that are the frames of a video, maybe it would be worthwhile to investigate simply animating the video position:
    1 point
  26. Shaun Gorneau test
    You're welcome, @elenika! Glad I could help
    1 point
  27. Jonathan test
    Hello @mackay2588, and welcome to the GreenSock forum! When i go to your page I got redirected like @Carl did. Thanks @OSUblake for providing the right link. But when i go to the right link I see errors first thing in the browser console. jquery.mobile.js:3337 Uncaught TypeError: Cannot read property 'concat' of undefined at jquery.mobile.js:3337 at jquery.mobile.js:3814 at jquery.mobile.js:22 at jquery.mobile.js:22 jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'top' of undefined TypeError: Cannot read property 'top' of undefined at animateDiv (https://mackay2588.github.io/scripts/randomMove.js:31:33) at HTMLDocument.<anonymous> (https://mackay2588.github.io/scripts/randomMove.js:9:9) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined jquery.min.js:2 Uncaught TypeError: Cannot read property 'top' of undefined at animateDiv (randomMove.js:31) at HTMLDocument.<anonymous> (randomMove.js:9) at l (jquery.min.js:2) at c (jquery.min.js:2) dbLogoB&W.png:1 GET https://mackay2588.github.io/dbLogoB&W.png 404 () You might want to also handle those console errors. But like Blake advised above you might want to use x (translateY) instead of using top. And reduce the amount of animated elements. I have also seen with that particles.js library being a great resource hog, especially on mobile draining my battery. Just my two cents
    1 point
  28. PointC test
    You still have an infinite timeline in your bunnyInTheBack() function which will cause problems with the master timeline progress() slider. // this is a problem const bunnyInTheBackTl = new TimelineMax({repeat:-1, repeatDelay: 10}); If you want that rabbit to pop up/down forever, I'd recommend making it a separate tween or timeline so it doesn't cause problems with your masterTl. Or you could set it to just a couple repeats if you prefer to leave it as part of the master. Happy tweeing.
    1 point
  29. Acccent test
    Oh okay. well let us know if you encounter any other difficulties related to gsap
    1 point
  30. Shaun Gorneau test
    That slider is there to illustrate/manipulate the progress of the timeline and is part of jQuery UI. If you need to replicate that functionality without jQuery/jQuery UI ... you might want to look into (sorry, wrong link ... I'll find the right one) Edit: @PointC's use of draggable is perfect
    1 point
  31. KerryRuddock test
    Thanks Blake for those examples. I played with the GSAP .call() and it worked fine and I stuck with Craig's example for my FCC project I was working on. Can be seen in this https://codepen.io/KerryRuddock/full/oqrXXv/ I really liked the powerpoint presentation effect GSAP brought to this project.
    1 point
  32. OSUblake test
    @gogo125 There's plenty of examples. I know because I made them. Webpackbin merged with CodeSandbox, so all those demos are gone, but if somebody asks, I can make another version. Another thing that might make searching harder, don't use a version number. It's Angular. Also, you can add scripts to the .angular.cli.json file instead of importing. https://github.com/angular/angular-cli/wiki/stories-global-scripts "scripts": [ "assets/gsap/TweenMax.js", "assets/gsap/plugins/DrawSVGPlugin.js" ]
    1 point
×
×
  • Create New...