Help a newbie with TweenMax and a two-sided banner ad...

[cr33ksid3]

Okay, I'm impatient and new to GSAP. Oh, and I hate CSS. I found an example of a vertical banner that works wonderfully. Rather than copy it completely I tried to put my own together and backwards engineer it horizontally. I slapped this design together just to get going with the code. It isn't special. What I am trying to achieve is probably obvious. When you rollover the red half... a full red banner should appear. When you rollover the blue side, the full blue banner appears. It somewhat works but is not very smooth and there are some quirks I have not been able to figure out. You will see what I mean... but if you don't... Rollover the red side and sometimes you see the full blue banner behind it for a split second. Same for the red banner. I've tried almost everything I can think of to hide and reveal things in the right order but something is off. I hate CSS but use it all the time with success (it just takes me longer than others) and I think my problem may be related. Help a newbie to GSAP and CodePen out if you can/would please. How can I fix this to be smooth and work properly. If we fix this, I will design a nicer banner ad to replace it and use the concepts for another CodePen example. Thanks in advance...

See the Pen wvvjRXZ by cr33ksid3 (@cr33ksid3) on CodePen

[ZachSaucier]

Hey cr33ksid3 and welcome to the GreenSock forums!

 

I'd recommend that you setup your HTML differently. I'd use something like this (you can obviously change the name and put whatever you want inside of each section):

<div class="banner">
  <div class="full-ads">
    <div class="red-ad">...</div>
    <div class="blue-ad">...</div>
  </div>
  <div class="half-ads">
    <div class="red-ad-half">...</div>
    <div class="blue-ad-half">...</div>
  </div>
</div>

Then your logic would could simple:

1. When one side is hovered, put the full ad that matches the hovered one on top of the other (probably using z-index) but both still beneath the halves.
2. Animate out both halves and play the correct "full" ad animation.
3. When it stops being hovered, reverse your animation (or animate them in a different way).

Does that makes sense? I think it would help simplify your code greatly.

[ZachSaucier]

Also note that you can't use z-index for SVG elements (at least until SVG 2 is supported, if that ever happens). The only thing that determines layering in SVG is their order in the markup. But you could have div containers for your SVG sections like I showed above.

[cr33ksid3]

Zach: Thank you. I was so wrapped up in trying to get this done through just the SVG code and TweenMax. I understand DIVs and CSS better right now. Can this (my) example be fixed to work though? I'm new to working with SVG files too if you couldn't tell. I can create them easy enough using Illustrator but I've never tried to animate them or manipulate them using GSAP...

 

Also, any fantastic online courses out there that you know of that would train a newbie like me at understanding and using CSS and GSAP scripts? I know GSAP has clubs and I found a few tutorials or courses but which is the best and fastest way to get a good grip? Much appreciated feedback too...

[ZachSaucier]

Yes, it's possible to do it just in SVG like you have:

1. Have two full size rectangles and two half size on top of them like you have. Show only the arrows (or whatever goes on top of them).
2. When one side is hovered, remove the opposite color's full size immediately (using GSAP's .set() method) and then remove the half that's hovered immediately (also using .set()). Then animate out the other half. That should leave only the full size rectangle of the color that was hovered left.
3. Animate in the content for that color/rectangle.
4. When the banner stops being hovered, animate in the half size(s) and then make the other full size rectangle "visible" (but still behind the half rectangles so it's not actually visible) again. 

As for courses, GSAP has a "Getting Started" article that may help. There's also some free online mini-courses like GreenSock 101. But all of those are about to be outdated as GSAP 3 will be released pretty soon  Then we'll have an all-new getting started page! The next version of GSAP is even more intuitive and easier to write.

 

In terms of CSS, it's mostly learned by doing it. Things like SVG not being able to have a z-index is something that you don't know until you need to know it, hah. I'm sure you can find some free online courses for a more general CSS education.

[cr33ksid3]

Zach:

 

Thanks again. I will continue to work with the SVG as I started but will look into the suggestions you've made. Plus, I have found the Getting Started and GreenSock 101 courses. I have been reading them at the same time as trying to work on this not-so-quick-to-me project. Interesting to see what GSAP3 evolves into... will continue learning more about current GSAP though.

[cr33ksid3]

Zach: .set() did the trick. Seems like a small accomplishment but that has been bugging me all afternoon. Now I can move on to animating the elements within each ad side. Thanks again for the quick response and help...

[ZachSaucier]

Glad to hear it! Happy to help.