[Looking for HELP for my Portfolio]

I am currently renewing my portfolio. And notice that I don't have enough skills for what I want to implement.

 

It's only about the home page of my portfolio, I would continue the rest myself. I need help for the following. the following should be done

 

• Fullscreen slider (with my works) with text animation, image / video liquid animation on hover
• Page transition for the selected work in the slider (without content only the transition)
• simple page transition for other page (like about,..)
• Preloader animation
• Hover animation of the navigation points
• Draggable/Scrollable endless grid (with image and on hover 'optional' gif/video) - on scrolling/dragging a little liquid effect )

 

I have a page here in which direction it should go.Here is the link for example (slider show, page transition, hover animation and at the bottom left when clicking on the layer icon the endless grid ) https://heycusp.com

 

I would provide the designs as well the necessary animation.

 

I hope someone can support me there (and can also implement this as in the example) and make my work a little easier. For info only I'm not a company or agency, i'm a ux / ui designer. Please send a message or answer to this topic (with the days you need for it and what you want for it).

 

Cheers

Mr.A

[Error: Can't find variable: TimelineMax]

oh thanks...it works now

[Error: Can't find variable: TimelineMax]

Hi,

 

I have a problem ... I have built some animation now with tweenmax which also work great (simple animations).

Now I wanted to build the next animation and get in this line:

var squareTl = new TimelineMax({paused: true});

an error message 

ReferenceError: Can't find variable: TimelineMax

On codepen everything works fine ... but locally comes only the error (i use VS)

 

I have copied the current version of TweenMax from here "https://cdnjs.com/libraries/gsap" and tested if it works if I link locally. but fail

    
        <!--Main JS -->
        <script src="js/app.js"></script>
        <!--TweenMax -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
        <!--<script src="js/TweenMax.min.js"></script>-->
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>-->
       
        <!--jQeury -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <!-- Swiper JS -->
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"></script>-->
        
        <!---------------------------------- JavaScript ---------------------------------->
    </body>
</html>

 

What I doing wrong? can anybody help me to fix this?

[Open and close overlay]

cool .. thanks first for your fast answer and your short explanation ..

 

I had already written a similar code (see comment in the js code) but it could'nt test it if it's works .. because I always get an error message ("Can not find variable: TimelineMax) on this line :

var overlayTl = new TimelineMax({paused: true});

How can I fix this?

 

Oh and the following what I wanted to do with the click event is this:

 

Overlay is closed:

1st hover -> rectangles have a greater distance to each other
2. Click -> Overlya opens and Hover state is paused or hover state is now default.

 

Overlay open:
1.Hover: hover animation is played backwards
2. Click: Overlay disappears and hover state is default again

 

Here is a short animation:

 

[Open and close overlay]

 

Hi,

I want to open an overlay by clicking and if I click again close again.

currently I can only open it but not close it. have now tried several variations and looked in other threads and tried unfortunately it doesn't work.

 

and if i clicked and want to close it my animation (viewHover will be played backwards) and then the click animation will play backwards.

So: in the closed state I have: mouseover, mouseout, click and the open state also

 

Can someone tell me how to do it the best way.

 

Would appreciate your help.

 

here is the relevant part of my code:

 

HTML

<div class="overlay" id="over"></div>

<div class="nav_center">
  <a href="#" class="icon_nav" id="view_wrap" onmouseover="viewHover();" onmouseout="viewHover();" onclick="click">
                            
    <span class="square square1" id="square1"></span>
    <span class="square square2"></span>
    <span class="square square3"></span>
    <span class="square square4"></span>
  </a>
</div

 

CSS

*{
  padding:0;
  margin:0;
  background-color: #000000;
}

.nav_center{
  display:flex;
  justify-content: center;
  align-items: center;
}
.icon_nav{
  width: 40px;
  height: 40px;
  padding: 13px;
  transition: transform 0.5s ease-in-out;
}
.square{
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #fff;
}
.square1{
  margin: 0px 8px 8px 0px;
  transform: translate(0px, 0px);
}
.square2{
  margin: 0px 0px 8px 8px;
  transform: translate(0px, 0px);
}
.square3{
  margin: 8px 8px 0px 0px;
  transform: translate(0px, 0px);
}
.square4{
  margin: 8px 0px 0px 8px;
  transform: translate(0px, 0px);
}

.overlay{
  position: absolute;
  z-index:-1;
  width:100%;
  height: 100%;
  background-color:#333;
  top:-110%;
}

 

JS

// Change View Animation
var view = document.getElementById('view_wrap');

// Events
var hoverView = view.addEventListener('mouseover', viewHover);
var hoveroutView = view.addEventListener('mouseout', viewHoverOut);
var clickView = view.addEventListener('click', click);


// Squares
var box1 = document.getElementsByClassName("square1");
var box2 = document.getElementsByClassName("square2");
var box3 = document.getElementsByClassName("square3");
var box4 = document.getElementsByClassName("square4");

// Overlay
var menuView = document.getElementsByClassName("overlay");

// View mouseover
function viewHover(){
    TweenMax.to(box1, .5,{x:"-2px", y:"-2px", ease: Power2.easeInOut});
    TweenMax.to(box2, .5,{x:"2px", y:"-2px", ease: Power2.easeInOut});
    TweenMax.to(box3, .5,{x:"-2px", y:"2px", ease: Power2.easeInOut});
    TweenMax.to(box4, .5,{x:"2px", y:"2px", ease: Power2.easeInOut});
};

// View mouseout
function viewHoverOut(){
    TweenMax.to(box1, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
    TweenMax.to(box2, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
    TweenMax.to(box3, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
    TweenMax.to(box4, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
};


// Close open

function click(){
    TweenMax.to(menuView, 1, {top:"-10%", ease: Power3.easeInOut});
}

/*
var menu = new TimelineMax({paused:true, reversed:true})
	
	menu
	.to(menuView, 0.75, {top:"10%", ease:Power2.easeInOut})
	
	function click() {
      menu.reversed() ? menu.play() : menu.reverse();	
}
*/

 

See the Pen rNBZvWG by jr_Arslan (@jr_Arslan) on CodePen