Animate Content in 'Fullscreen slides'

[mikel]

Hi,

 

'Fullscreen slides' by Chrysto  is super for my next project.

 

For each slide there should be an individual animation of the content.

This Tween should start onComplete and pause(0) changing to next/prev slide.

 

How can I integrate these Tweens in the system of Chrysto?

 

Best regards

Manfred

See the Pen kDvmC by bassta (@bassta) on CodePen

[OSUblake]

I just posted something in this thread about toggling animations.

http://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/?p=55007

 

I basically just added in what I made in the demo from that post.

 

See the Pen ZbdxRx by osublake (@osublake) on CodePen

 

[mikel]

Hi Blake,

 

Thanks for your examples.

 

Over the weekend I will study both and look how to use one for my needs.

The challenge: For every slide an individual animation / different objects.

 

I´ll keep you posted.

Best regards

Manfred

[mikel]

Hi Blake,

 

I tried a lot. But I´m lost - not able to handle the job: 

See the Pen jbJmGm by mikeK (@mikeK) on CodePen

 

I´m faszinated of your excellent explanation 'How to toggle tweens in a DRY fashion'.

 

 

Manfred

[OSUblake]

You have several code issues to begin with. You created your vars down low in the code, which resulted in them being created after the slide animation started. Another thing is that your if statement is incorrect. You only have one "=" sign, which assigns a value, meaning that your if statement is always true.

 

// Always true
if(anim02 = true) {
  T02.play();
}

// Use "===" to compare
if (anim02 === true) {
  T02.play();
}

// Or the value itself
if (anim02) {
  T02.play();
}

 

 

I see no point in toggling CSS classes if it doesn't change the style, so I created a currentIndex variable, which is what you are really trying to get. I added different timelines to an array, so now we can reference them by the currentIndex. To toggle the animations, I added this to the callback when a slide changes.

 

// Timelines...
var timelines = [timeline1, timeline2, timeline3, timeline4];

// Toggle the timelines
function onSlideChangeEnd() {
  isAnimating = false;
    
  // Reverse the timeline for the previous slide
  timelines[currentIndex].reversed(true).progress(0);
    
  // Change the index
  currentIndex = $currentSlide.index();
    
  // Play the timeline for the current slide
  timelines[currentIndex].reversed(false);
}

 

 

 

See the Pen 62b4dfe92278650f2207ca38903dd82f?editors=001 by osublake (@osublake) on CodePen

 

[mikel]

Hi Blake,

 

wow, that´s great. A perfect motivation to realize this project.

And ...  to learn step by step proper coding - enjoying Greensock. 

 

Best regards from Hamburg

Manfred