Jump to content

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

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Shaun Gorneau

  1. Hi @zozo, the reason for this trouble is a clash between what is being set in CSS and what is being overridden (due to specificity). In the CSS you have .disk{ transform: translate(-50%, -50%) } Which of course is perfectly valid. But what happens when this is run ... tl.fromTo(".disk", 2, {rotation:0}, {rotation:360, ease:Linear.easeNone}); is that the transform matrix is taken over. So, to keep -50% and -50% in the calculations, you can just set those as properties in the fromTo and let the mediaQuery handle it from there, like so Hope this helps!
  2. Hi @kbeats, because we need each block to be controlled by its own timeline, we can't keep recreating var tl = new TimlineMax()... Because we'll just keep overwriting the `tl` ... potentially reversing the wrong timeline. So, we need dynamic variable names to hold the timelines. In PHP, we can do cool things like <? $something = 'foo'; $$something = 'bar'; print $foo; // -> bar // we can also do $i = 1; ${'something_'.$i} = 'Green'; $i++; ${'something_'.$i} = 'Sock'; print $something_1.$something_2; // -> GreenSock In Javascript, we're not so fortunate with the variable variables. But, in the global scope, when assigning var a = 1; we can get to the value of `a` with any of the following ... console.log( a ); console.log( window.a ); console.log( window['a'] ); So, seeing as `a` is a property of the window object (in the global scope), we see how variables can be declared that way too. Dot syntax doesn't help construct a variable variable because we can't use an expression for the property ( e.g. this.'something'+i just doesn't work ) But arrays allow strings as key values ... so we can use an expression there ( e.g. this['something_'+i] ). Soooooo, var tl = new TimelineMax(); Is the same as stating window.['tl'] = new TimelineMax(); which means var i = 0; window.['tl_'+i] = new TimelineMax(); i++; window.['tl_'+i] = new TimelineMax(); is perfectly valid for creating dynamic variable names .. and we now have tl_1; // a TimlineMax object tl_2; // another TimelineMax object and, in terms of if (!window[id]) { ... I'm just checking to see if it's been defined. If not, create the Timeline and control it. If yes, don't recreate the timeline, just control it. Hope this helps! EDIT *** After rereading ... I don't want to ignore what would be done within a function (i.e. not in the global scope) If we do the following .. var a = 1; function something(){ var a = 2; console.log( a ); } something(); console.log( a ); The console would show 2 1 because when something() is called, it in itself has a console.log which references the `a` in the local scope, outputting 2 ... and then the other console.log is called after that referencing the `a` in the global scope, outputting 1. But, we can create variable variables within the function just like I did above by declaring in the window object to then be addressable directly in the global scope or anywhere as a property of window. But if we just need variable variables within the scope of a function, we can also do function something(){ var i = 0; this['tl_'+i] = new TimelineMax(); i++; this['tl_'+i] = new TimelineMax(); // creating variables `tl_0` and `tl_1` within the scope of the function }
  3. Hi @kbeats, the issue I see is that you are appending to the same timeline and playing/reversing that timeline. That's why they get added together. Give this a try,
  4. Hi @cjstage, This is specifically due to rotating on an axis ... and I believe is an accurate representation of what is happening. Imagine you have two shapes each containing points [1, 1] and [-1,-1] (i.e. they are on the same plane). If one were to rotate on the X or Y axis, an edge of that would come forward on the Z axis while the opposite edge would go deeper into the Z axis, appearing behind the other shape. But ... if you moved the one rotating back enough on the Z axis (or the other forward enough on the Z axis) ... it wouldn't cross in front of the other's Z position (0).
  5. Will absolutely do it! And I see you meant "truly" one line! I thought you meant one chained event I included a yoyo only because I caught a glimpse of it in your original code. With or without, you certainly answered your own question! Nicely done! Here is a pen using your method
  6. Hi @Jimmi Heiserman There are many ways to skin a cat! Using a single, chained statement ... you could execute delays by either using the position parameter, the delay property, or by tweening to an already set value for the duration = to the desired delay. Here is a CodePen illustrating. Hope it helps!
  7. Nope, not at all One of my major takeaways here is that ScrollMagic (many times) is not necessary, and that is certainly the case with the CodePen in this thread.
  8. “Is there any other way to tackle this using frontend side ie, writing javascript?” Hi Pradeep, the two second options (cookie and local storage) are JavaScript solutions. Do you mean solutions other than those two?
  9. Hi @Pradeep KS, You'll need to set a hook somewhere on the client side to check against. There are a few ways to do that. If you are using server side code for anything, you could set a session variable on the first load, and then use the presence of that session variable to set a hook on the client side, for example ... <? $class = ''; if( $_SESSION['subsequent_visit'] ){ $class = ' subsequent-visit'; } ?> <body class="some-class another-class <? print $class;?>"> Which you can then check for before you create the timeline. Example if( document.querySelector('body.subsequent-visit').length < 1 ){ const tl = new timelineMax(); ... } Or, on the client side alone, you could set a cookie to check against, or a variable in local storage to check against. Hope this helps, Shaun
  10. Hi @hallibus. If I understand correctly, you're looking for setInterval and clearInterval. Hope this helps!
  11. Whoa! That's going back! I'm not sure `appendMultiple` and `allTo` are supported any longer. I think you'd want to look at add() instead. (I could be wrong though)
  12. Hi @kbeats, and welcome to GSAP! To get two tweens on a timeline to happen at the same time, you would set the position parameter. And more info on that https://greensock.com/position-parameter Happy tweening!
  13. Hi @Forxs, of what does the function insertContent() comprise?
  14. Hi @frankallen and welcome to GSAP! I haven't had too much to dive into it (I will in a little bit) ... but one thing we strongly suggest is isolating your issue into a CodePen. That helps in multiple ways; namely isolating the issue and recreating the issue with all other variables removed. I got one started for you here ... Hopefully I (or anyone) can help soon. Happy tweening!
  15. If I understand correctly ... this should do the trick (you can play with timings).
  16. Hi @lselby, might be easier to do the tweens right inside the event handlers.
  17. Sure thing ... but I want to clarify something before pointing you in a direction ... 3. By "Box will show up" ... do you mean appear instantly at X/Y, or tween to that position, fade in, something else? And what duration of time between "repeats"?
  18. Hi @Exhumator, you'll probably want to give function-based values a look. Check out this pen
  19. Hi @Rakesh Roy, you'll want to do a few things to set this up to make it appear seamless. 1. Preload the full screen image and a bit of the "click through" content 2. Animate to the full screen state along with displaying the top of page content (already on the page) 3. AJAX to fetch the "click through" URL's content (or the content of a specific element at the target URL) 4. Load that content into a container to and hide the current page's main content container 5. Replace the current window.location ( history.pushState() ) This pen demonstrates a method for going from a tile to a full screen image ... in this particular case it's full width, but the principles are the same. Hope this helps!
  20. @codekai98 Now worries ... I think a big part of the problem here is all pens are accomplishing many things (slide navigation, slide transitions, slide element tweens, etc.) In my example, all you really have to focus on is a small part with the " function moveToSlide( index )", notably // Slide moving to TweenMax.to('.wrapper', 1 , { y: -$('.wrapper').height()*(index-1), rotation: 0, ease: Power2.easeOut } ); TweenMax.to( intoSection.find('.background-image-wrapper'), 1 , { y: 0, rotation: 0 } ); TweenMax.to( intoSection.find('h2') , .5, { y: 0, autoAlpha: 1 } ); TweenMax.staggerTo( intoSection.find('.some-content') , .75, { y: 0, autoAlpha: 1, delay: .5 }, .125, function(){ isScrolling = false; } ); That is what is handling the tweening of elements on the slide being moved into (rather than being tween on page load).
  21. You're welcome, @jordank On another note ... it might be useful to seek to a label on the master timeline rather than restart ... in the event that you want to loop the middle portion of a master timeline. Defining a label within each master timeline add() and then passing that label as a 3rd parameter to looper would take care of that.
  22. I think it's just a problem with your timeline reference ... "this" won't reference the master timeline (or any timeline) in that scope. Try passing the timeline as a parameter,
  23. Ah, in that case ... I think you're looking for three.js ... specifically this https://threejs.org/examples/#webgl_camera_cinematic
  24. Hi @Luckyde, welcome to GreenSock! This should be fairly easy to accomplish. If you cover the y rotation of the ground (as in visually obstruct it with a piece of paper or your hand), the rest is fairly straight forward horizontal parallax. Here is a CodePen kind of showing that ... not hooked into Draggable, and just yoyoing ... and also poorly executed But the principles are there.