Run Hype Animation on Click of HTML Element

Using JavaScript with Hype
1

I have a div on my homepage with a large background image with text and a button that fades in overtop. I would like to have it so when the button is clicked, the background image, text and button go away and the hype animation replaces it and starts. jQuery is already called on the page, but I have little javascript experience and this is over my head.

Thanks for any help you can give me!

    <section id="main-slider" class="no-margin">
    <div class="carousel slide">
        <div class="carousel-inner">
            <div class="item active" style="background-image: url(bg1.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-12 text-center">
                            <div class="carousel-content">                                
                              <h1 class="animation animated-item-1" style="color:#fff">Regain the Full Experience</h1>
                                <h2 class="animation animated-item-2" style="color:#fff">How does this? affect you?</h2>
                                
                                <div class="row">
                                    <div class="col-md-6 col-md-offset-3">
	                            
	                            
									<a href="human_foreskin" class="btn btn-primary btn-slide btn-lg btn-lg animation animated-item-3">Learn More</a>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>                
        </div>
    </div>
</section>
2

Can you not add an action to the timeline, that fades the elements away. So the button needs only start the timeline, and the first action for the timeline is to fade those elements ?

3

It would slow Google’s calculated load time, but yeh, thats what I ended up doing. Thanks guys.