Jump to content
GreenSock

mikel

Animate Content in 'Fullscreen slides'

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
}

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×