Jump to content


  • Posts

  • Joined

  • Last visited

About momciloo

momciloo's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. Hi @ZachSaucier thanks for your reply! How would you approach an animations that has several segments, but nothing happens between segments? For example, go from A to B, and then nothing, until I scroll enough to trigger B to C? The only approach I can think of with having one animation and one scroll trigger, is that I should somehow find a way to translate total scroll trigger's length into a total timeline's duration, and then add dynamic delay duration where needed, so that when I scroll through the animations, it stays still where needed because of delays. Will that be the best way to approach? Thank you!!
  2. Hi @Shaun Gorneau, Thanks for the speedy answer! That animation look exactly what I want to achieve, but there's one problem: if implemented like that, I'm losing settings for each target. Now the whole animation plays within the target_1 settings, resulting in circle finishing its journey much before target_3's top reaches the center of the viewport. 😕 I need to be able to specify at what moment and for how long (how long scroll), the circle should be on a specific coordinates, and how much time it should transition between coordinates. If it makes the whole problem simpler, scrub is not that important.
  3. Hi! First time using scrollTrigger, and it's immediately something a bit trickier I'm trying to animate an object (circle in the example) to different coordinates, while scrolling. I tried a few things, but this is the closest to the desired effect I managed to go. When you scroll slowly, it works fine. When you try to scroll a bit faster, that’s when things start to become messy. Preferably, I would want to have circle immediately transition to another tween, even if due to scrub: 2 it didn't reach the final coordinates of a previous tween. Is there a better approach to this problem? Thank you!!
  4. I think I managed to better understand the problem, so here is the reduced explanation: What I think is happening, is that when I want to play an animation from a certain point in time, it also runs functions before. In the example here, when I click the button, I am expecting only the function with 'audio' label to run when I click on audio button, but what it does is just playing master timeline from the beginning. What is the real usage here, is that I have master timeline, that has nested timelines in it, and each nested timeline should play one by one, and has "next" button at the end of it's animation. So only clicking on "next" should resume master animation. But I also have external navigation, where I can choose which part of the master animation I want to play. Thank you!
  5. Hello, Thanks for fast response. I posted only this, without a demo, since I wanted to check if what you currently see seems alright. When I try master.play('certainLabel'), it behaves literary as master.resume(); I have that much pauses because each section has it's own "next" button, which just resumes the master timeline. Maybe it's not the best approach, but that's why I am here asking the question
  6. Hello, First time posting here, but already learned a lot of great things on this forum. Thank you community! I am having a problem with playing timeline from a certain point (label). I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline. const master = new TimelineMax(); master.add( preload ) .add( audio_togle, '+=13' ) .add( particles ) .add( navigation_show ) .add( videoSize, 'particles+=2' ) .add(function () { videoPlay('intro') }) .add( parallax ) .add( scene_first_show, 'scene1show' ) .add( pause ) .add( scene_first_hide, 'scene1hide' ) .add( pause ) .add(function () { scene(text[0]) }, 'home' ) .add( pause ) .add(function () { scene(text[1]) }, 'about') .add(pause) .add(function () { scene(text[2]) }, 'contact') .add(pause) .add(function () { scene(text[3]) }, 'portfolio') .add(pause) .add(function () { videoPlay('outro')}) .add( scene_final, 'finalLogo') .add(pause) function pause() { master.pause(); masterIsPaused = master.paused(); console.log('Master is paused'); } And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. mainNavItem.on('click', function () { $self.addClass('is-active'); mainNav_hide(); var whatToShow = $self.data('show'); master.seek(whatToShow); }); But `master.seek(whatToShow);` doesn't work at all. How can I jump to certain label and play from there? Thank you, Mo